动态添加行 - 从上方追加行答案

【问题标题】：Adding row dynamically - append row from above动态添加行 - 从上方追加行
【发布时间】：2016-03-22 10:21:44
【问题描述】：

<form id="form1" name="form1" method="post" action="">
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
    <tr>
        <td>
            <input type="text" name="item[]" id="11" />
        </td>
        <td>
            <input type="text" name="recommendations[]" id="12" />
        </td>
        <td>
            <input type="text" name="importance[]" id="13" />
        </td>
        <td>
            <input type="text" name="quantity[]" id="14" />
        </td>
    </tr>
</table>

添加行

http://jsfiddle.net/yKjuw/283/

我已经解决了大部分这些问题，因为我不知道自己在做什么。使用上面的小提琴，您可以看到 name 属性修改为 FIRST 表 td 的 ID。我需要每列的名称保持不变。我尝试使用 td:second td:third 添加其他变量，但该函数根本无法工作。有人可以帮忙吗？

【问题讨论】：

Add a row on top of table generated by javascript的可能重复
@mJunaidSalaat 链接的问题，我相信，不是他要问的，他希望在每一行上保持 name 属性相同。他的小提琴工作正常
不像那个伙伴

标签： javascript jquery

【解决方案1】：

您可以根据当前输入元素的最后一行和索引获取输入的名称，如

function addTableRow(jQtable) {
  var $row = jQtable.find("tr:last"),
    $inputs = $row.find('input');
  var lastId = $row.find("td:first input").attr("id");
  var newId = parseInt(lastId) + 10;

  var row = $('<tr />');

  for (var i = 0; i <= 2; i++) {
    var thisId = newId + i;
    var cell = $('<td />');
    var label = $('<label for="' + thisId + '">' + thisId + '</label>');
    var input = $('<input type="text" name="' + $inputs.eq(i).attr('name') + '" id="' + thisId + '" />');
    cell.append(label, input);
    row.append(cell);
  }
  row.append('<td><a href="#">del</a></td>');
  jQtable.append(row);
}

演示：Fiddle

您可以使用.clone() 来简化此操作

function addTableRow(jQtable) {
  var $row = jQtable.find("tr:last"),
    $clone = $row.clone().appendTo(jQtable);

  $clone.find('[id]').attr('id', function(i, id) {
    return 10 + +id;
  });
  $clone.find('label').remove();
  $clone.find('input').each(function() {
    $(this).before('<label for="' + this.id + '">' + this.id + '</label>')
  })
}

演示：Fiddle

【讨论】：

这正是我所需要的。这个答案还帮助我解决了我在输入动态方面的许多其他问题。谢谢
我会读到 .clone() 似乎是我一直想念的。

【解决方案2】：

或者这个：Fiddle

使用克隆，很简单。 jQuery clone

function addTableRow(e) {
    var row = $('#mans tr:last');
        row = row.clone(true);
        row.find('>td>input').each(function(){
            var t = $(this), id = t.attr('id'), new_id = id*1+10;
            t.attr('id',new_id);
        });
    $('#mans').append(row);
}
function removeRow(e){
    e.preventDefault();
    $(this).parents('tr').remove();
}
$(function () {
    $('#addRow').on('click', addTableRow);
    $('table tr>td>a').on('click', removeRow);
});

【讨论】：