Question

此代码的宽度我可以在表中添加新行，现在我想在输入rowid（1,2,3,4,5，...）中也添加行号，如果我删除一个行，我需要重新计算顺序（我对jquery的经验很少）。我尝试过但没有成功：

$(table).delegate('.tr_clone_add', 'click', function() {
  function updateRowOrder(){
  $('tr.table-data').each(function(i){
        var row = $(this).text(i+1);
  });
}
  var thisRow = $(this).closest('tr')[0];
  $(thisRow).clone().insertAfter(thisRow).find('#col1').val('0.00');
  $("#rowid").val(row);
});

这将添加以下行：

var table = $('#table-data')[0];

$(table).delegate('.tr_clone_add', 'click', function() {
  var thisRow = $(this).closest('tr')[0];
  $(thisRow).clone().insertAfter(thisRow).find('#col1').val('0.00');       
});

$(table).delegate('.tr_clone_del', 'click', function() {
  if ($('.tr_clone').length > 1) {
    var thisRow = $(this).closest("tr")[0];
    thisRow.remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-data">
  <tbody>
    <tr class="tr_clone">
      <td style="padding:3px;">
        <input type="text" name="rowid[]" id="rowid" class="tbox_novo" value="1" style="text-align:center;">
      </td>
      <td style="padding:3px;">
        <input type="text" name="col1[]" id="col1" value="0.00"></td>
      <td style="padding:3px;">
        <button type="button" class="tr_clone_add">+</button>
      </td>
      <td style="padding:3px;">
        <button type="button" class="tr_clone_del">-</button>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您的操作方式将以许多元素结尾，重复的id和id必须是唯一的。

每次添加新行时，都应该获取已经拥有的行数，然后再递增1。使用此值，您可以设置要创建的行的ID。

删除时，获取要删除的行的ID，删除后，运行所有行，查看ID大于删除的ID的行，所有ID较大的行的ID都应减小。 / p>

我还向id添加了<tr>，这使得跟踪每一行的ID变得容易

参见下文：

var table = $('#table-data')[0];
var tbody = $(table).find('tbody')

$(table).delegate('.tr_clone_add', 'click', function() {
  let newId = $(".tr_clone").length + 1;
  var thisRow = $(this).closest('tr')[0];
  let newRow = $(thisRow).clone();
  newRow[0].id = newId
  newRow.find('.tbox_novo').eq(0).attr("id","rowid_"+newId).val(newId);
  newRow.find("[name='col1[]']")[0].id = "row_"+newId+"_col1";
  tbody.append(newRow)
});

$(table).delegate('.tr_clone_del', 'click', function() {
  if ($('.tr_clone').length > 1) {
    var thisRow = $(this).closest("tr")[0];
    let id = parseInt(thisRow.id);
    thisRow.remove();
    $(".tr_clone").each((i, elem) => {
      if (parseInt(elem.id) > id){
        let newId = parseInt(elem.id) - 1;
        elem.id = newId
        $(elem).find(".tbox_novo").val(newId)
      }
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-data">
  <tbody>
    <tr class="tr_clone" id="1">
      <td style="padding:3px;">
        <input type="text" name="rowid[]" id="rowid" class="tbox_novo" value="1" style="text-align:center;">
      </td>
      <td style="padding:3px;">
        <input type="text" name="col1[]" id="col1" value="0.00"></td>
      <td style="padding:3px;">
        <button type="button" class="tr_clone_add">+</button>
      </td>
      <td style="padding:3px;">
        <button type="button" class="tr_clone_del">-</button>
      </td>
    </tr>
  </tbody>
</table>

在输入中添加带有rowid的jQuery的新行

1 个答案: