Question

I have the following code that is working (clicking on the link will show the next hidden table row):

HTML:

<table>

<a href="#" class="showrows">Add row</a>

<tr class="cache">
<td><input type="text"  size="15"></td>
<td><input type="text"  size="15"></td>
</tr>

<tr class="cache">
<td><input type="text"  size="15"></td>
<td><input type="text"  size="15"></td>
</tr>


</table>

and my JS:

$(document).ready(function() {

$('tr.cache').css("display","none");

$('.showrows').live('click',function(e){
   e.preventDefault();
   $('tr:hidden:first').show("fast");   
});

});

But now I need to have several tables like the current one (see above) on the same page, each one with its own “showrows” functionality. Actually I need my JQuery code to find to which table the link belongs to, then find the first hidden row of this table, and show it…

I have tried all the following solutions, one by one:

$(this).closest('tr.cache').show("fast");
$(this).closest('tr:hidden:first').show("fast");
$(this).closest('table').find('tr:hidden:first').show("fast");
$(this).closest('tr').show("fast");
$(this).parents('table').next('tr:hidden:first').show("fast");

and none is working! What’s the issue according to you? Thanks for your help!

Answer 1

add a table row and a table cell around your link, you have an invalid HTML markup

what the browser(most) browsers do they will give you this markup:

<a class="showrows" href="#">Add row</a>
<table>
    <tbody>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
        <tr class="cache">
            <td><input type="text" size="15"></td>
            <td><input type="text" size="15"></td>
        </tr>
    </tbody>
</table>

so you need to change your markup a bit:

<table>
  <tr>
    <td colspan="2">
      <a href="#" class="showrows">Add row</a>
    </td>
  </tr>
  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>

  <tr class="cache">
    <td><input type="text"  size="15"></td>
    <td><input type="text"  size="15"></td>
  </tr>

</table>

and use the jQuery code:
$(document).ready(function() {

  $('tr.cache').css("display","none");

  $('.showrows').live('click',function(e){
    e.preventDefault();
    var table = $(this).closest("table");
    $('tr:hidden:first', table).show("fast");   
  });

});

demo:

http://jsbin.com/owefew/1/edit