动态添加行-从上方追加行 [英] Adding row dynamically - append row from above

问题描述

<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添加其他变量，但是该功能根本无法正常工作.有人可以协助吗?

I have been going through most of these questions and as I have no idea what I am doing. Using the fiddle above you can see the name attribute amends to to ID of the FIRST table td. I need the name of each column to remain the same going down. I tried to add other variables with td:second td:third but the function failed to work at all. Can anyone assist?

推荐答案

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

You can get the name of the input based on the last row and index of current input element like

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

演示:小提琴

您可以使用.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>')
  })
}

演示:小提琴

这篇关于动态添加行-从上方追加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！