Question

我一直在关注各种StackOverflow和Google的答案，但我无法弄清楚这一点。

我正在尝试做的是在我页面上的许多表中添加一行。现在，所有“添加行”请求都会添加到第一个表中。

这是我的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>'))
        );
    });
});

以下是我开始每张桌子的方式：

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

这是我正在使用的按钮：

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

我知道我必须为每个表的ID递增id，但我不知道如何处理Javascript只能在执行请求的表中添加一行。

我怎样才能让它发挥作用？

Answer 1

您可以使用closest获取相关表格：

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

    // do your thing
});

正如您所提到的，每个按钮的id应该是唯一的。我建议使用一个类，使你的选择器.add_row。

Answer 2

将表格和按钮放在div中，然后使用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>

使用jQuery在页面上添加行到特定表

2 个答案: