Question

我有用于在单击添加按钮时向表中添加行的代码。当我单击添加行按钮时定义了表的第一行，它只是克隆了上面的行并追加了它。一切正常。

当从数据库中获取数据并在表上显示记录时，如果表有多行，假设表有两行，然后单击添加按钮，它将克隆以上两行。一排就可以了，多排会出现问题

这是我的代码

            var id = 2; //assume table total length 2
            $("table.itemsdetails button.add_dup").click(function() {
            id++;
            var master = $(this).parents("table.itemsdetails");

            // Get a new row based on the prototype row
            var prot = master.find(".item-row").clone();
            prot.find(".itemname").val("");
            prot.attr("class", id + " item");
            prot.attr("id", id + "itemslno");
            prot.addClass("itemr");                 
            prot.find(".id").attr("value", id);
            master.find("tbody").append(prot);
            prot.append('<td><button class="remove">X</button></td>');
            });

当记录从数据库中获取到表行时

<table id="itemsdetails" class="itemsdetails">
   <thead>
      <tr>
         <th>Sl No</th>
         <th>Items</th>
      </tr>
   </thead>
   <tbody>
      <tr id="1itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="16"><input id="slno" invoiceitems_id="16" name="slno" class="form-control id" value="1" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  " readonly="readonly"> </td>
      </tr>
      <tr id="2itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="17"><input id="slno" invoiceitems_id="17" name="slno" class="form-control id" value="2" readonly=""></td>
         <td class="description"> <input invoiceitems_id="17" id="itemname" name="itemname" class="form-control itemname info" value="jhghjgj" readonly="readonly"> </td>
      </tr>
   </tbody>
   <tfoot>
      <tr id="hiderow_duplicate" style="display:block">
         <th><button style="width:73px;" class="add_dup">ADD ROW-D</button></th>
      </tr>
   </tfoot>
</table>

当我点击“添加”按钮html时，其外观应类似于

<table id="itemsdetails" class="itemsdetails">
   <thead>
      <tr>
         <th>Sl No</th>
         <th>Items</th>         
      </tr>
   </thead>
   <tbody>
      <tr id="1itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="16"><input id="slno" invoiceitems_id="16" name="slno" class="form-control id" value="1" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td>
      </tr>
      <tr id="2itemslno" class="item-row itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="17"><input id="slno" invoiceitems_id="17" name="slno" class="form-control id" value="2" readonly=""></td>
         <td class="description"> <input invoiceitems_id="17" id="itemname" name="itemname" class="form-control itemname info" value="jhghjgj"> </td>
      </tr>
      <tr id="3itemslno" class="3 item itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="16"><input id="slno" invoiceitems_id="16" name="slno" class="form-control id" value="3" readonly=""></td>
         <td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td>
         <td><button class="remove">X</button></td>
      </tr>
      <tr id="3itemslno" class="3 item itemr">
         <td><input class="invoiceitemsID" id="invoiceitemsID" type="hidden" value="17"><input id="slno" invoiceitems_id="17" name="slno" class="form-control id" value="3" readonly=""></td>
         <td class="description"> <input invoiceitems_id="17" id="itemname" name="itemname" class="form-control itemname info" value="jhghjgj"> </td>
         <td><button class="remove">X</button></td>
      </tr>
   </tbody>
   <tfoot>
      <tr id="hiderow_duplicate" style="display: block;">
         <th><button style="width:73px;" class="add_dup">ADD ROW-D</button></th>
      </tr>
   </tfoot>
</table>

请问有人可以帮助我吗？

Answer 1

使用如下所示的append()并指定标签名称TBODY。请参见下面的代码段。

在注释中，您添加了必须附加迭代的要求。

我想动态显示slno，即3、4、5等。

此时，增量为{{1}}的解决方案是最好的。

然后，您在表中的行数上添加了您希望使用的要求。

先生，您知道在追加表格行之前如何计算表格总行长吗？那么我需要将其动态设置为myCounter值

此时，将jQuery选择器与++结合使用将是最佳解决方案。参见下面的代码。

所以我们在这里成为我的朋友...

.length

$(".add_dup")[0].onclick = function(){
  var row = $("tbody tr").length + 1;
  $( "tbody" ).append( '<tr id="' + row + 'itemslno" class="item-row itemr"><td><input class="invoiceitemsID" id="invoiceitemsID' + row + '" type="hidden" value="16"><input id="slno' + row + '" invoiceitems_id="16" name="slno[]" class="form-control id" value="' + row + '" readonly=""></td><td class="description"> <input invoiceitems_id="16" id="itemname" name="itemname" class="form-control itemname info" value="ghvg  "> </td></tr></tbody>' );
};

Answer 2

问题是您要复制（或克隆）表中的所有行，而不是仅添加一个。

var prot = master.find(".item-row").clone();

您应该在哪里克隆最后一个

var prot = master.find(".item-row:last-child").clone();

但是，由于您搞砸了DOM并添加了新内容，因此您必须在追加之后重新实例化ADD ROW-D click事件，所以我说您应该开始将逻辑拆分为几个函数。

如果表已经多于一行，如何使用jquery向表中添加新行

2 个答案: