jquery 删除最后一个 td 的内容答案

【问题标题】：jquery remove contents of last tdjquery 删除最后一个 td 的内容
【发布时间】：2013-09-24 06:35:32
【问题描述】：

我有一张桌子 $("#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");          
    });

【问题讨论】：

标签： jquery

【解决方案1】：

你可以这样做：

..
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);          
});

更新Fiddle

【讨论】：

【解决方案2】：

我将点击事件添加到添加按钮。由于选择器为 <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
});

fiddle here

【讨论】：

【解决方案3】：

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

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

Here is working Demo

【讨论】：

【解决方案4】：

试试这个代码：

$("#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);
});

Fiddle Demo Here

【讨论】：