动态删除表行时自动递增输入框id

Auto increment input box id when dynamically delete the table row

本文关键字：输入 id 删除 动态      更新时间：2023-09-26

我可以动态创建和删除表中的行，但我需要在删除行时，输入字段的Id应该按顺序排列。假设我已经创建了一行，"Item no"的id是1，并且我再次创建了另一行，那么"Item no"的下一个id将是2，反之亦然。但情况是，当我们删除第5个id的"项目编号"时，第6个id将自动更改为第5个。

我已经写了动态创建和删除行的代码，但我需要帮助自动增加id。

<table class="table table-hover poTable">
 <thead>
   <tr>
     <th class="col-md-1">
        Item No.
     </th>
     <th class="col-md-1">
        Fruit Code
     </th>
     <th>
        Fruit Name
     </th>
     <th>
        Unit Price
     </th>
     <th>
        UOM
     </th>
     <th>
        Order Quantity
     </th>
     <th>
        Amount
     </th>
     <th>
        Action
     </th>
   </tr>
</thead>
<tbody id="tableBody">
<!-- row -->
<tr class="first">
   <td>
     <input type="text" id="itemNo1" class="form-control" name="itemNumber"  value="10">
  </td>
  <td>
    <select class="form-control required" id="fruitCode1"  >
    <option>100</option>
    </select>
  </td>
  <td>
    <input type="text" id="fruitName1"  class="form-control required"  name="fName" value="mango">
  </td>
  <td>
    <input type="text" id="unitPrice1"  class="form-control required"   name="uPrice" value="100">
  </td>
  <td>
   <input type="text" id="uom1" class="form-control required"  name="uOM" value="kg">
  </td>
  <td>
   <input type="text" id="qty1" name="tQTY" class="form-control required " onchange="totalAmount();">
  </td>
  <td>
    <input type="text" id="total1" name="tPrice" class="form-control tAmountMain required" disabled>
   </td>
   <td>
     <p onclick="createTable();" style="cursor:pointer">Create</p>
   </td>
   </tr>
</tbody>

现在，这是我的js代码。

var counter= 1;
function createTable(){
counter++;
var itemNo = document.getElementById("itemNo1").value;
var fruitCode = document.getElementById("fruitCode1").value;
var fruitName = document.getElementById("fruitName1").value;
var unitPrice = document.getElementById("unitPrice1").value;
var uom = document.getElementById("uom1").value;
var qty = document.getElementById("qty1").value;
var amount = document.getElementById("total1").value;


$('#totalRowCount').text(counter-1);
var htmlText = '';
htmlText += '<tr class="first">';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="itemNo'+counter+'" class="form-control" name="itemNumber" value="'+itemNo+'">' ;
htmlText += '</td>';
htmlText += '<td>';
htmlText += '<select class="form-control" disabled  id="fruitCode'+counter+'">';
htmlText += '<option>'+fruitCode+'</option>';
htmlText += '</select>';
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="fruitName'+counter+'" class="form-control" name="itemNumber" disabled value="'+fruitName+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="unitPrice'+counter+'" class="form-control" name="itemNumber" disabled value="'+unitPrice+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="uom'+counter+'" class="form-control" name="itemNumber" disabled value="'+uom+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="qty'+counter+'" class="form-control" name="itemNumber" value="'+qty+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += '<input type="text" id="total'+counter+'" class="form-control tAmount" name="itemNumber"  value="'+amount+'">' ;
htmlText += '</td>';
htmlText += '<td class="itemNumber">';
htmlText += ' <i class="icon-minus icon-2x minusIcon del" onclick="deleteRows();"></i>' ;
htmlText += '</td>';
htmlText += '</tr>';
htmlText += '</tbody>';
htmlText += '</table>';
$('#tableBody').append(htmlText);
var sum = 0;
$('.tAmount').each(function() {
sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum)
}
function deleteRows(){
$('.del').click(function(){
      $(this).parent().parent().remove();
      var sum = 0;
$('.tAmount').each(function() {
    sum += parseFloat($(this).val());
});
$('#grandTotal').val(sum)
});
}

我建议您向<tr>元素，比如行号="1"，行号="2"，因为你的文本框是可编辑的，然后你可以写一个函数来更新行号，以创建和删除

htmlText += '<tr class="first" row-number="' + counter +'">';
.....
.....
window.updateIds = function() {
    $.each($("[row-number]"), function(index, item){
        $(this).attr("row-number",(index+1));
        $("[id^=itemNo]", $(this)).attr("id", "itemNo"+(index+1));
    });
}

在创建和删除的最后一行之后调用此函数

$('#grandTotal').val(sum);
updateIds();

查看我的JsFiddlehttp://jsfiddle.net/ZigmaEmpire/37tmwLev/

--编辑--

要更新ID属性，必须使用以选择器开头的属性https://api.jquery.com/attribute-starts-with-selector/

$("[id^=itemNo]", $(this)).attr("id", "itemNo"+(index+1));

选中此JsFiddlehttp://jsfiddle.net/ZigmaEmpire/37tmwLev/1/

您不必维护总行数，您可以使用代码获得行数

var counter = $("[row-number]").length+1;

（或）

var counter = $("poTable tr").length+1;

每次删除一行时，都可以重新计算计数器：

var recalculate = function() {
   $('table.poTable').find('tbody > tr').each(function(index) {
      var newCount = index + 1;
      $(this).find('[id^=itemNo]').attr('id','itemNo' + newCount);
   });
}
$('.del').on('click', function() {
   $(this).closest('tr').remove();
   recalculate();
});
相关文章：