JQuery在指定位置插入表格行

Question

我一直在研究如何向HTML表格插入行的解决方案。这非常棘手。我找到了一个可以工作的方法，但只适用于第一次“插入”。我无法弄清楚我做错了什么。

我有一个基本的表格，每个表格有3列，每个表格都有一个按钮，允许在2个行之间插入一行。我在这个网站上搜索到了一个JQuery的解决方案，即当我按下按钮时，它会在我想要的位置添加行。但是，当我在最后插入的行后添加另一行时，该行会向后插入1个位置，下一次我按下按钮时，它会向后插入2行等等。我无法弄清楚我做错了什么，有人知道为什么吗？

还有更好的方法吗？即在任何位置将行添加到表格中？

JQuery代码;

<script>
$(document).ready(function(){
    $(".addRow").click(function(event){

    //get the button id to get the row
    var $id=this.id;
    var $totrecords;
    var $newrow;
    var $totalrowsadded;
    //get id of clicked button
    $id=$id.replace("add_", "");

    $totrecords=document.getElementById('totalrecords').value;
    $totrecords++;

    //store number of rows added
    $totalrowsadded=document.getElementById('totalrowsadded').value;
    $totalrowsadded++;
    document.getElementById('totalrowsadded').value=$totalrowsadded;

    //update record count
    document.getElementById('totalrecords').value=$totrecords;

    var $html='<tr class="newrow"><td>'+$totrecords+'<button type="button" class="addRow" id="add_'+$totrecords+'">add</button></td><td><label for="ProductHeight'+$totrecords+'">height</label><input name="data[Product][height'+$totrecords+']" type="text" value="0" id="ProductHeight'+$totrecords+'"/></td><td><label for="ProductWidth'+$totrecords+'">width</label><input name="data[Product][width'+$totrecords+']" type="text" value="0" id="ProductWidth'+$totrecords+'"/></td><td><label for="ProductPrice'+$totrecords+'">List Price</label><input name="data[Product][price'+$totrecords+']" type="text" id="ProductPrice'+$totrecords+'"/></td></tr>';


    $newrow=parseInt($id)+1;
    alert('new row insert at '+$newrow);

    $('#productstable > tbody> tr:nth-child(' + $newrow + ')').after($html);    


});
});

</script>

我的表格长这样;

<table id="productstable">
    <tr>
        <th>Insert</th>
        <th>Height</th>
        <th>Width</th>
        <th>List price</th>
    </tr>

    <tbody>
    <tr id="0">
        <td>0 :<button type="button" class="addRow" id="add_0">add</button></td>
        <td><label for="ProductHeight0">height</label><input name="data[Product][height0]" type="text" value="115" id="ProductHeight0"/></td>
        <td><label for="ProductWidth0">width</label><input name="data[Product][width0]" type="text" value="595" id="ProductWidth0"/></td>
        <td><label for="ProductPrice0">List Price</label><input name="data[Product][price0]" type="text" id="ProductPrice0"/></td>
    </tr>

    <tr id="1">
        <td>1 :<button type="button" class="addRow" id="add_1">add</button></td>
        <td><label for="ProductHeight1">height</label><input name="data[Product][height1]" type="text" value="140" id="ProductHeight1"/></td>
        <td><label for="ProductWidth1">width</label><input name="data[Product][width1]" type="text" value="295" id="ProductWidth1"/></td>
        <td><label for="ProductPrice1">List Price</label><input name="data[Product][price1]" type="text" id="ProductPrice1"/></td>
    </tr>

    <tr id="2">
        <td>2 :<button type="button" class="addRow" id="add_2">add</button></td>
        <td><label for="ProductHeight2">height</label><input name="data[Product][height2]" type="text" value="140" id="ProductHeight2"/></td>
        <td><label for="ProductWidth2">width</label><input name="data[Product][width2]" type="text" value="395" id="ProductWidth2"/></td>
        <td><label for="ProductPrice2">List Price</label><input name="data[Product][price2]" type="text" id="ProductPrice2"/></td>
    </tr>

    <tr id="3">
        <td>3 :<button type="button" class="addRow" id="add_3">add</button></td>
        <td><label for="ProductHeight3">height</label><input name="data[Product][height3]" type="text" value="140" id="ProductHeight3"/></td>
        <td><label for="ProductWidth3">width</label><input name="data[Product][width3]" type="text" value="495" id="ProductWidth3"/></td>
        <td><label for="ProductPrice3">List Price</label><input name="data[Product][price3]" type="text" id="ProductPrice3"/></td>
    </tr>

    </tbody>
</table>

- fuzzy dunlop

Answer 1

您需要使用 JQuery 中的 append 函数：

$('#productstable TBODY').append($html); 

要在包含已单击按钮的行后添加一行，请使用以下代码：

$(this).closest('TR').after($html);

closest函数沿着树向上查找最近的TR，然后after将其放在其后面。

- Jon Grant

---

更像是某种排序列表。你可能需要查看HTML代码。 - Smamatti

我使用的是 CakePHP 2.0，所以输出结果是这样的。 - fuzzy dunlop

不，它应该放到最后（作为最后一个子元素插入），请参阅文档：http://api.jquery.com/append/ - Jon Grant

我需要在表格的特定位置添加一行，即在按钮被点击的地方。 - fuzzy dunlop

使用最接近的函数，参见上文。 - Jon Grant

太棒了，一行代码就能运行，非常感谢，也感谢大家的帮助。 - fuzzy dunlop

Answer 2

以下是如何在行 后面 追加内容的方法:（需要使用 after 而不是 append ）

$(".button_class").closest("tr").after("<tr>... contents of row ...</tr>");

这是我写的一个实例，用来演示这个问题：实时示例。

- Ben