Adding Row to Specific Table on Page with jQuery

Question

I've been looking at all sorts of StackOverflow and Google answers, and I've not been able to figure this out.

What I'm trying to do, is add a row to one of many tables on my page. Right now, all "add row" requests add to the first table.

Here is my Javascript:

$(document).ready(function() {
$("a#add_row").click(function () {
$('#ListTable1').height($('#collapse1').height() + 60)
    $("#delTable").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append('<input type="text" name="name[]" size="5"class="input input-small" />'))
                .append($('</td>')
                )
                .append($('<td>')
                .append('<input type="text" name="endpoint[]" size="5" class="input input-small" />'))
                .append($('</td>')
                )
                .append($('<td style="width: 20px">')
                .append()
                .append($('</td>')
                ))
            .append($('</tr>'))
        );
    });
});

And here is how I start each table:

<table class="table" id="listTable1" style="width: 280px;">
<thead>...the head...</thead>
<tbody>...all sorts of rows. Added row goes at the end of the tbody...</tbody>
<tfoot>
   <tr>
      <td><a id="add_row">Add Row</a></td><td></td>
   </tr>
</tfoot>
</table>

And here is the button I'm using:

<a id="add_row">Add Row</a>

I know that I must increment the id for each table's ID, but I have no idea what to do with the Javascript to only add a row to the table that executed the request.

How can I get this to work?

@David: Try not to use append that much, not only is it a lot of method calls but each $() asks jQuery to generate a new object. A lot of performance penalties going on there. Do something similar to : var tableRow = '<tr><td><input type="text" name="name[]" size="5" class="input input-small"/></td><td><input type="text" name="endpoint[]" size="5" class="input input-small" /></td><td style="width: 20px"></td></tr>'; $("#delTable").find('tbody').append(tableRow); — Nope
– Nope, Commented Aug 10, 2012 at 23:43

James Montagne · Accepted Answer · 2012-08-10 23:29:34Z

1

You can use closest to get the relevant table:

$("#add_row").click(function () {
    var $theTable = $(this).closest("table");

    // do your thing
});

As you alluded to, the id of each button shoudl be unique. I would recommend using a class instead, making your selector .add_row.

answered Aug 10, 2012 at 23:29

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RoboKozo Over a year ago

Cool! I didn't know about .closest() I was going to suggest .parents("table")

James Montagne Over a year ago

@Robodude Yup, parents would work except if there were nested tables, it would return them all. Closest is nice since it only returns the nearest ancestor matching the selector.

cosmic_wheels · Accepted Answer · 2012-08-10 23:32:20Z

Place the table and the button inside a div and then use parent();

Javascript

$(document).ready(function() {

    $("a#add_row").click(function () {

    var table = $(this).parent().find('table');


    table.height($('#collapse1').height() + 60)

    $("#delTable").find('tbody').append($('<tr>')
    .append($('<td>')
    .append('<input type="text" name="name[]" size="5"class="input input-small" />'))
            .append($('</td>')
            )
            .append($('<td>')
            .append('<input type="text" name="endpoint[]" size="5" class="input input-small" />'))
            .append($('</td>')
            )
            .append($('<td style="width: 20px">')
            .append()
            .append($('</td>')
            ))
        .append($('</tr>'))
    );
});
});

HTML

<div id="container">

    <table class="table" id="listTable1" style="width: 280px;">...</table>
    <a id="add_row">Add Row</a>

</div>

Collectives™ on Stack Overflow

Adding Row to Specific Table on Page with jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related