Question

我在循环中有一个表，我想通过单击“添加行”按钮向表中添加一行。这是我的代码

HTML：

<div id="popUp" style="display: none">
    <input type="button" value="Cancel" onclick="closePopup()">
    <input type="button" value="ADD" onclick="addRow(this)"/>
</div>
@for (int i = 0; i < 3; i++) { 
    <table id="table @i" class="tableSum">
        <thead>
            <tr>
                <td>Items</td> 
                <td>Quantity</td>
                <td>Price</td>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td>Apple</td>
               <td>5</td>
               <td>100</td>
           </tr>
            <tr>
               <td>Organe</td>
               <td>5</td>
               <td>200</td>
           </tr>
        </tbody>
        <tfoot>
            <tr>
               <td>Total</td>
               <td></td>
               <td></td>
           </tr>
             <tr><td colspan="3"><input type="button" class="addRow" onclick="addRow(this)" value="ADD ROW"/></td></tr>
        </tfoot>
    </table>
}

然后在javascript中写了函数：

function addRow(table) {
    $(table).find('tbody tr:last').clone().appendTo(table);
}

但它不会添加一行。如果我使用没有参数“table”的函数，新行将被添加到循环内的所有表中我期望的结果是：当用户点击按钮时，只会在一个表中添加新行，而不是全部添加。

Answer 1

您需要先使用closest查找其父表：

function addRow(table) {
    $(table).closest('table')//find parent table
      .find('tbody tr:last')//find last tr of the table
      .clone()//clone it
      .appendTo($(table).closest('table').find('tbody'));//append it to tbody
  //append to 'tbody' not this row
}

根据您更新的问题，请转到：

function addRow(table) {
    $(table).parent()//find parent div
      .next()//get the table
      .find('tbody tr:last')//find last tr of the table
      .clone()//clone it
      .appendTo($(table).parent().next().find('tbody'));//append it to tbody
  //append to 'tbody' not this row
}

Answer 2

onclick="addRow(this)"上的

td。 this代表了td。不是table。您可以传递表格的id或某个选择器，也可以在脚本中找到父table。

您可以使用parents()查找父table。

function addRow(td) {
    var table = $(td).parents('table');
    var cloned = table.find('tbody tr:last').clone();
    table.find('tbody').append(cloned);
}

如果您希望所有事件都有效，那么请使用clone(true)。否则，您必须bind将事件发送到tr。

在循环错误内向表中添加行

2 个答案: