Question

我能够动态创建和删除表的行，但是当我删除行时，我需要输入字段的Id应该按顺序排列。假设我已经创建了一个行，并且ID为＆＃34;项目号＆＃34;是1然后我又创建了另一行，然后是＆＃34;项目号＆＃34;将是2，反之亦然。但情况是，当我们删除＆＃34;项目no＆＃34;第5个id然后第6个id将自动变为5th。

我已经编写了动态创建和删除行的代码，但我需要帮助来自动增加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)
});

}

Answer 1

我会重新给你介绍一个属性到＆lt; tr＆gt; 元素，比如row-number =“1”，row-number =“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();

检查我的JsFiddle http://jsfiddle.net/ZigmaEmpire/37tmwLev/

- 编辑 -

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

开头

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

检查此JsFiddle http://jsfiddle.net/ZigmaEmpire/37tmwLev/1/

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

获取行数

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

（或）

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

Answer 2

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

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();
});

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

2 个答案: