使用迭代更新输入名称，并在删除时更新表单

Question

我需要创建一个HTML表单，用户可以在其中添加新行，然后在必要时将其删除。

我有部分工作；我可以添加到表中，然后删除到表中。但是，出于特殊原因，我需要表中的每一行都具有相同的迭代编号，例如[0]，[1]用于下一行，依此类推。

我尝试了各种方法来使它起作用，但是我对jquery的知识充其量只是业余知识！我搜寻了互联网，没有任何东西可以准确或连贯地解决我的问题。

  <table id="options-table">                    
    <tr>
      <td width="10">ID</td>
      <td>Name</td>
      <td>From</td>
      <td>Cost</td>
      <td></td>
    </tr>
    <tr>
      <td><input  name="number" type="text" value="0" /></td>
      <td><input class="one" name="name[" type="text" /></td>
      <td><input class="two" name="from[" type="text" /></td>
      <td><input class="three" name="cost[" type="text" /></td>                        
      <td><input type="button" class='del' value='Delete' /></td>
    </tr>                  
    <tr>
      <td><input name="number" type="text" value="1"  /></td>
      <td><input class="one" name="name[" type="text"  /></td>
      <td><input class="two" name="from[" type="text" /></td>
      <td><input class="three" name="cost[" type="text"  /></td>
      <td><input type="button" class="add" value="Add More" /></td>
    </tr>
  </table>

$('table').on('click', '.add', function(){
  $(this).val('Delete');
  $(this).attr('class','del');
  var appendTxt = "<tr><td><input name='number' type='text' /></td> <td><input class='one' name='name[' type='text' /></td> <td><input class='two' name='from[' type='text' /></td><td><input class='three' name='cost[' type='text' /> </td><td><input type='button' class='add' value='Add More' /></td></tr>";
  $("tr:last").after(appendTxt);    
    $("input[name='number']").each(function(ind) {
        $(this).val(ind + 1);
      });



$("input.one").each(function(i) {
  $(this).attr('name', $(this).attr('name') +i + ']');

});

我面临的问题是，在删除一行时，我将使用新的]重新获得数字的加法。

应为第1行：名称[0]，来自[0]，成本[0]，依此类推。

有人能更准确地指出我应该看的东西吗？欢呼