Jump to content

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


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 :)

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.