Question

我有一个HTML表格如下。

<table id="items">

     <tbody>

      <tr>
          <th>SlNo</th>
          <th>Item</th>

          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Price</th>
      </tr>


       <tr class="item-row">
         <td class="item-name">
          <div class="delete-wpr"><input type="text" value="1" class="slno"/> <a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

           <td><input type="text" class="slno"/></td>           

          <td><input type="text" class="cost"/></td>
          <td><input type="text" class="qty"/></td>
          <td><span class="price"></span></td>
      </tr>  



    <input type="button" value="submit" onClick="storeAndShowTableValues()"/>


    </tbody>

 <tr id="hiderow">
        <td colspan="5"><a id="addrow" title="Add a row">Add a row</a></td>
        <!-- href="javascript:;" --> 
      </tr>

</table>

添加按钮完美无缺。并且S1：在每行添加时没有增加。我也可以删除行。但问题在于数字。想象一下，有7行。如果我删除第6行，那么行应该重新调整。所以我想，每当一行被删除时，调用一些jQuery函数，这将重置增量顺序中第一行的所有数字。我在jQuery中使用以下函数，但它不起作用。

以下添加行脚本完美无缺。

 $("#addrow").click(function(){
index1++;
window.globalCounter++;
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><input type="text" value="'+index1+'" class="slno"/><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr>');


if ($(".delete").length > 0) $(".delete").show();
bind();

}）;

删除行功能也有效，但重新排序表索引的脚本不起作用。所以我想，一旦按下按钮删除一行，执行一个jQuery，首先删除所选行，然后重置所有数字的索引从1。

 $('#items').on('click', ".delete", function(){


     $('#items').find('tr').find('td:first').each(function(index){   //This function doesnt work. 
    $(this).text(index+1);
});

    $(this).parents('.item-row').remove();


    if ($(".delete").length < 2) $(".delete").hide();
});

Answer 1

一种简单的方法是忘记现在使用的数字并在输入上设置名称属性。如果你将它们作为数组，它们将作为0索引列表自动发送：

checked

现在您可以轻松地serialize您的表单，将其发送并在后端处理它，而无需手动构建数据。

使用jQuery动态自动增加HTML表行值

1 个答案: