Jump to content

[SOLVED] Handling multiple onClicks to show/hide a Table Row?


galvin

Recommended Posts

Referring to the simple code below, if you have multiple Table Rows that you want to be hideable/showable, how can you adjust this code so that it only hides the same row in which you click the "hide" button.

 

In other words, how do I alter the code so that when you click a "Hide" button, it will hide ONLY the Table Row to the immediate left of the Hide button that you clicked?...

 

<html>
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
   document.getElementById("hidethis").style.display = '';
}else{
   document.getElementById("hidethis").style.display = 'none';
}
}
</script>
</head>
<body>



<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td><textarea>Hide this</textarea><input onClick="toggle();" type='submit' value='hide' name='add'/></td>
</tr>
<tr id="hidethis">
<td><textarea>Hide this</textarea><input onClick="toggle();" type='submit' value='hide' name='add'/></td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>

</body>
</html>

Not 100% sure but you need to give the row you want to hide unique id's...

 

<tr id="hidethis1">
<td><textarea>Hide this</textarea><input onClick="toggle('hidethis1');" type='submit' value='hide' name='add'/></td>
</tr>
<tr id="hidethis2">
<td><textarea>Hide this</textarea><input onClick="toggle('hidethis2');" type='submit' value='hide' name='add'/></td>
</tr>

 

<html>
<head>
<script>
function toggle(which) {
if( document.getElementById(which).style.display=='none' ){
   document.getElementById(which).style.display = '';
}else{
   document.getElementById(which).style.display = 'none';
}
}
</script>
</head>
<body>

 

That should do what you are wanting, you will just need to change each row's id to be unique and add it into the toggle function. There is probably a better way of doing it, but yea :)

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.