Question

我有下表

<table id="invoice">
    <tr>
      <th>Quantity</th>
      <th>Item</th>
      <th><input type="button" id="addnew" name="addnew" value="Add Row"  />
      </th>
    </tr>
    <tr id="id1">
      <td><input id="quantity1" name="quantity[]" tabindex="1" type="text" value=""  /></td>
      <td><select id="rate1" name="rate[]" tabindex="2" value="">
          <option value="">SELECT</option>
          <option value="1">ONE</option>
          <option value="2">TWO</option>
        </select></td>
      <td><input  id="remove1"  name="remove[]"  tabindex="3"  type="button" value="Remove Row"class="remove"/></td>
    </tr>
  </table>

我可以使用以下脚本添加行

var next = 2;
function addrow(table,add)
{
  $(add).bind('click', function() {   
    var $last = $(table + ' tr:last');
    var last_row = $last.clone();  
    $(last_row).find(":input").each(function() {
      var store = $(this).attr("id");
      var new1 = store.replace(/1/, next);
      $(this).attr("id",new1);
    });
    last_row.appendTo($(table))
    $(table+" tr:last").hide().fadeIn('slow');
     next++;  
  });
}
addrow('#invoice','#addnew');

Demo

上面的脚本克隆了第二行并附加到实际需要的表中。但问题是如果用户在文本框的第二行输入一些值，然后单击addrow，它会在新行中使用值复制它。为了克服这个问题，我只需更改脚本。

我将脚本更改为以下

var next = 2;
function addrow(table,add)
{
  var $last = $(table + ' tr:last');///changed this line
  var last_row = $last.clone(); /// changed this line  
  $(add).bind('click', function() {   

    $(last_row).find(":input").each(function() {
      var store = $(this).attr("id");
      var new1 = store.replace(/1/, next);
      $(this).attr("id",new1);
    });
    last_row.appendTo($(table))
    $(table+" tr:last").hide().fadeIn('slow');
    next++;  
  });
}

Demo

这只会添加一行，它只会更改最后一行，但不会添加多于新行。

任何人都可以更正第二个脚本，因为这对我的项目非常有用，因为许多其他脚本与此相关。

Answer 1

var next = 2;

function addrow(table, add) {
    var $last = $(table + ' tr:last'); ///changed this line
    var last_row = $last.clone(); /// changed this line  
    $(add).bind('click', function() {
        var localClone = last_row.clone(); // you want to clone the DOM row.
        $(localClone).find(":input").each(function() {
            var store = $(this).attr("id");
            var new1 = store.replace(/1/, next);
            $(this).attr("id", new1);
        });
        localClone.appendTo($(table));
        $(table + " tr:last").hide().fadeIn('slow');
        next++;
    });
}

您希望每次单击时都创建一个新的clone / DOM行。否则你只需继续移动一排。

所以我们在开始时克隆了我们原来的最后一行，并且我们继续克隆“干净的行”。干净的行保持干净，因为永远不会将last_row添加到DOM。

@patrickdw提到了另一个选项，即继续克隆click函数中的最后一行，但清除行的数据。取决于你的行是什么样的，每次清理它可能是值得的。

关于@patrickdw方法的好处是你可以清理一些数据但保留其他数据。这可能对你有用。

从onload jquery向表添加行

1 个答案: