javascript - 在循环错误中向表中添加行

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

onclick="addRow(this)" 在 td 上。 this 将代表当前的 td。不是表。您可以传递 id 或表的某些选择器，或者在您的脚本中找到父级 table。

您可以使用parents() 找到父表。

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。