0

我有一张桌子 $("#Customers")。

<table id="Customers">
 <tbody>
  <tr>
    <td>
        <input id="model_0_name" type="text" name="model[0].name"/>              
    </td>
    <td>
        <button>Add</button>
    </td>
  </tr>
 </tbody>
</table>

每行在最后一个 td 元素中都有一个按钮。我想克隆该行并将其添加到单击的行下方。我想从克隆的行中删除按钮元素。克隆部分正在工作，但按钮没有被删除。此外，我想将新输入行的 id 和名称重命名为新索引：例如：model[1].name。

 $("#Customers > tbody > tr").click(function (event) {
        event.preventDefault();
        // get row index
        var rowndx = $("tr").index(this);
        var cnt = $("#Customers > tbody > tr").length;
        var clonerow = $(this)
            .clone()
            .wrap("<tr></tr>").parent().html();
        $("#Customers > tbody > tr").eq(rowndx - 1).after(clonerow).remove("tr > td:last");          
    });
4

4 回答 4

0

你可以这样做：

..
var clonerow = $(this)
            .clone().find("button").remove().end()
            .wrap("<tr></tr>").parent().html();

演示:: jsFiddle

工作代码：

$("#Customers > tbody > tr").click(function (event) {
   event.preventDefault();
   // get row index
   var rowndx = $("tr").index(this);
   var cnt = $("#Customers > tbody > tr").length;
   var clonerow = $(this)
            .clone().find("input").attr("id", "model_"+cnt+"_name").end().find("button").remove().end()
            .wrap("<tr></tr>").parent().html();
   $("#Customers > tbody > tr").eq(rowndx - 1).after(clonerow);          
});

更新小提琴

于 2013-09-24T06:42:10.713 回答
0

试试这个代码：

$("#Customers > tbody > tr > td > button").on('click', function() {
    var $tr    = $(this).closest('tr');
    var $clone = $tr.clone();
    $clone.find('td:last').remove();
    $tr.after($clone);
});

小提琴演示在这里

于 2013-09-24T07:25:22.363 回答
0

我将点击事件添加到添加按钮..因为选择器为<tr>，专注于输入最终会添加新的<tr>。

尝试这个

$("#Customers > tbody > tr > td > button").click(function (event) {
  event.preventDefault();
  // get row index
  var $tr = $(this).parents('tr'); //get parent `tr`
  var countTR = $("#Customers tr").length //get total length of tr
  var cloned = $tr.clone(); //clone it
  cloned.find('td:last').remove(); //remove the last td from cloned element
  cloned.find('input').val('').attr('name', 'model' + [countTR + 1] + '.name') //find inout chnage name and empty the calue
  $("#Customers tr:last").after(cloned); //append it at the end
});

在这里摆弄

于 2013-09-24T06:46:18.770 回答
0

您应该尝试从克隆对象中删除：

var clonerow = $(this)
    .clone().find("td:last").remove().end()
    .wrap("<tr></tr>").parent().html();

这是工作演示

于 2013-09-24T06:40:12.350 回答