CODEWITHSUNDEEP
jqueryrowshow
nadir
nadir

Reputation: 1323

JQuery: cannot show hidden <tr> when clicking on a link

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!

Upvotes: 0

Views: 1165

Answers (4)

thecodeparadox
thecodeparadox

Reputation: 87073

Change you HTML a little bit.

Place your anchor tag out of table for valid markup.

HTML

<!-- First table -->

<a href="#" class="showrows">Add row</a>
<table>
  <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>

<!-- Second table -->

<a href="#" class="showrows">Add row</a>
<table>
  <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>

<!-- More tables -->

jQuery

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

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

DEMO

One thing

If possible use .on() for delegate event (aka live event) handling with jQuery 1.7+, instead of .live(), because its deprecated.

Upvotes: 0

Frank van Wijk
Frank van Wijk

Reputation: 3252

With identifier (HTML structure can be changed)

You have to 'attach' the link to the table. You can use the data-... attribute for example, but an id is also ok. NB: You cannot put an anchor directly in a table, so Vadym Petrychenko's solution is still invalid HTML.

<a href="#" class="showrows" data-table="table1">Add row to table 1</a>
<table id="table1">
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 1</td>
        <td><input type="text"  size="15">Table 1 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 1 cell 3</td>
        <td><input type="text"  size="15">Table 1 cell 4</td>
    </tr>
</table>

<a href="#" class="showrows" data-table="table2">Add row to table 2</a>
<table id="table2">
    <tr class="cache">
        <td><input type="text"  size="15">Table 2 cell 1</td>
        <td><input type="text"  size="15">Table 2 cell 2</td>
    </tr>
    <tr class="cache">
        <td><input type="text"  size="15">Table 2cell 3</td>
        <td><input type="text"  size="15">Table 2 cell 4</td>
    </tr>
</table>

JQuery code:

$(document).ready(function() {
    $('tr.cache').css("display","none");
    $('.showrows').live('click',function(e) {
        e.preventDefault();
        $('table#' + $(this).attr('data-table') + ' tr:hidden:first').show("fast");   
    });
});

See http://jsfiddle.net/Mikey/KnRFf/

Without identifier

I you are really using this HTML structure, it is also possible to link to the table after the anchor with $(this).next('table').find('tr:hidden:first').show("fast");

Upvotes: 0

darthwade
darthwade

Reputation: 1434

$('.showrows').live('click', function(e) {
    e.preventDefault();

    var table = $(this).parent();
    $('tr:hidden:first', table).show("fast");   
});

Try this.

Upvotes: 0

voigtan
voigtan

Reputation: 9031

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

Upvotes: 1

Related Questions