在Javascript中向表中动态添加多行

我希望能够向表中添加任意数量的行，以便表能够动态地增长和收缩。（现在我只关注它的增长），当我想在表的底部添加一行时，这个代码效果很好，但是当我想在表中间添加一行时，代码中有些东西不太正确，（并且我得到了一个错误）。 例如

标题|标题|标题|
1....| 1.... | 1.... | addBtn

几分钟后

标题|标题|标题|
1..1..1..1..addBtn

---

2......2....2....addBtn我同意jQuery是你做这类事情的朋友。看看这个例子

waaaaay-less代码我设法将JS简化为如下内容：

var table = $("table"),
button = $("#clicktoadd");

 button.on('click', function() {
     table.append("<tr><td>New Data</td><td>New Data</td>");
   });

var table=$（“table”），
按钮=$（“#单击添加”）；
按钮。在（'单击'，函数（）上）{
表.追加（“新数据新数据”）；
});

^^干杯

---

编辑：

我想这就是你需要的：

var table = $("table");

$(document).on('click', 'a', function() {
   // some randomness to distinguish rows
   var a = Math.round( Math.random() * 10 ), b = Math.round( Math.random() * 10 );
   $(this).parents('tr').after("<tr><td>" + a + "</td><td>" + b + "</td><td><a           class='clicktoadd' href='#'>Click to Add</a></td>");
});

var table=$（“table”）；
$（文档）。在（'click'，'a'，function（）上{
//区分行的一些随机性
var a=Math.round（Math.random（）*10），b=Math.round（Math.random（）*10）；
$（this.parents（'tr'）。在（“+a+”+b+”）之后；
});

---

它有一个稍微不同的html设置，我也更新了上面的小提琴。

所以我从工作人员那里得到了一些帮助。以下是我们得到的：

$(document).on('click', '#purchaseItems .add', function(){

        var row = $(this).closest('tr');
        var clone = row.clone();

        // clear the values
        var tr = clone.closest('tr');
        tr.find('input[type=text]').val('');

        $(this).closest('tr').after(clone);

    });

这是我第一次用小提琴演奏的一个活生生的例子

---

你好，jdog。谢谢你的回复。很好，很快，很容易，在我的阿森纳为未来而努力。然而，我需要的是略有不同。你可以看到下面的内容：）贝拉什建议：如果需要复制或复制与克隆元素相关联的数据和事件处理程序，请考虑使用2个参数进行克隆。看见

var table = $("table");

$(document).on('click', 'a', function() {
   // some randomness to distinguish rows
   var a = Math.round( Math.random() * 10 ), b = Math.round( Math.random() * 10 );
   $(this).parents('tr').after("<tr><td>" + a + "</td><td>" + b + "</td><td><a           class='clicktoadd' href='#'>Click to Add</a></td>");
});

$(document).on('click', '#purchaseItems .add', function(){

        var row = $(this).closest('tr');
        var clone = row.clone();

        // clear the values
        var tr = clone.closest('tr');
        tr.find('input[type=text]').val('');

        $(this).closest('tr').after(clone);

    });