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

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>

添加按钮完美无缺。并且随着每一行的添加，Sl:no 会增加。我也可以删除行。但问题在于数字。假设有 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 索引列表自动发送：

<input name="slno[]" type="text" class="slno"/>
// etc.

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