0

我一直在查看各种 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 只向执行请求的表添加一行。

我怎样才能让它工作？

4

2 回答 2

1

您可以使用最接近获取相关表：

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

    // do your thing
});

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

于 2012-08-10T23:29:34.673 回答
1

将表格和按钮放在一个 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>
于 2012-08-10T23:32:20.540 回答