Question

我有一个动态表单，可以在页面上插入新行。每行将根据计数器值生成新的id（project1，project2，project3）。当我删除一行时，我将我的计数器设置为减少。

假设我有4个动态生成的行，我删除了第3行。现在，当我添加一个新行时，我最终得到了带有project4的2x id。有一种简单的方法可以简单地重新索引行，所以如果第3行被删除，那么4会变成3等。而不是使用我当前的计数器方法？我需要将每一行存储为数组吗？

我可能完全因为目前的方式而使事情变得复杂。

  jQuery('a.pluslink').click(function(event) {
  var counter = 1;

    event.preventDefault();

    var newRow = jQuery(
      '<tr><td><input class="form-control full-width autocomplete" id="project' + counter +
      '"  type="text"></td>' +
      '<td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +
      '"/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"/><td>' +
      '<input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +

      '"/></td><td><input class="form-control full-width" id="full-name-f1" type="text" value="0"' +
      '/></td>' + '<td><a href="#" class="minuslink">Delete</a></td></tr>');

    $('#project' + counter, newRow);

    jQuery('table.tablesubmit tr:last').before(newRow);

    counter++;
  });

  $("table.tablesubmit").on('click', '.minuslink', function(e) {

    event.preventDefault();

    $(this).parent().parent().remove();

    counter--;
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="tablesubmit">
  <thead>
    <tr>
      <th width="30%">Project name</th>
      <th width="10%">Mon</th>
      <th width="10%">Tue</th>
      <th width="10%">Wed</th>
      <th width="10%">Thur</th>
      <th width="10%">Fri</th>
      <th width="10%">Sat</th>
      <th width="10%">Sun</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input class="form-control full-width" id="project" type="text">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="1.25">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="5">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="1">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="5.5">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <input class="form-control full-width" id="full-name-f1" type="text" value="0">
      </td>
      <td>
        <a href="" class="minuslink">Delete</a>
      </td>
    </tr>
    <tr>
      <td class="bold" width="25%">
        <a>Total Time:</a>
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.25" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="8" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7.5" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="7" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td width="10%">
        <input class="form-control full-width" id="full-name-f1" type="text" value="0" style="background-color:#DEE0E2;">
      </td>
      <td>37.5</td>
    </tr>
  </tbody>
</table>
<a href="#" class="pluslink">Add new project</a>

Answer 1

您可以使用$().each()遍历每一行，并重新编号。但真正的问题实际上是：你为什么改变你的柜台？我实际上会处理处理数据的服务器端代码，这样即使你有漏洞也能正常工作。例如，在php中：

foreach ($_GET as $key => $value)
{
  if(strpos($key,"project")==0)
  {
    // process whole row
    // You can even use a sub-string to get the counter and call the other inputs you have on the same row this way
  }
}

如果你必须在客户端拥有它，我会这样做：

jQuery('a.pluslink').click(function(event) {
  event.preventDefault();
  var counter=0;
  jQuery('table.tablesubmit tr').each ( function (i) {
    var input=$(this).find('input[name^="project"]');
    if(input.length>0) counter++;
    input.attr('id','project'+counter);
  });
  counter++;
  var newRow = jQuery(
    //no changes there
  );
  jQuery('table.tablesubmit tr:last').before(newRow);
});

Answer 2

一种方法是将表基于数组（可以更容易地更新），并在每次从数组中删除值时完全重写表（注意使用 index 更改输入的ID中的数字）：

＆＃13;

table_array = [
  {
    cell_1_value:"cell 1 row 1",
  },
  {
    cell_1_value:"cell 1 row 2",
  },
];
function write_table_from_array(this_array){
  table_html = '<table>';
  this_array.forEach(function(row,index){
    table_html += "<tr><td><input id='input_row"+index+"'>"+row.cell_1_value+"<input class='delete_button' id='delete_"+index+"' type='button' value='delete'></td></tr>";
  });
  table_html += '</table>';
  document.getElementById("table_div").innerHTML = table_html;
  
  //keep this in function
  $(".delete_button").on("click",function(){
    row_to_delete = this.id.replace("delete_","");
    table_array.splice(row_to_delete,1);
    write_table_from_array(table_array);
  });
}
write_table_from_array(table_array);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table_div"></div>

＆＃13;

计数器重新索引行删除

2 个答案: