Question

因此，当我添加新行时，每行都有一个ID，该ID根据已添加的行数递增。如果我添加三行，然后删除第二行，然后添加另一行，那么新行的ID与旧的第三行相同。

有没有一种更简单的方法可以执行此操作，或者可以执行一个循环来检查现有号码？

$('body').delegate('.remove', 'click', function() {
  $(this).parent().parent().remove();
});

function addnewrow() {
  var n = ($('.detail tr').length - 0) + 1;
  var tr = '<tr>' +
    '<td>' + n + '</td>' +
    '<td><select id="drop' + n + '" class="select-service" name="prodService[]">  <
    option value = "" > -Choose Service - < /option></select > < /td>'+
  '<td id="desc' + n + '"></td>' +
    '<td><a href="#" class="remove">Delete</a></td>' +
    '</tr>';

Answer 1

尝试这种方式...将计数器放在函数之外。

$('body').on("click", '.remove', function() {
  $(this).closest("tr").remove();
});
var n = 1;
$('body').on('click', '.add-new-row', function() {
  
  var $tr = $("<tr />");
  var $td1 = $("<td />").text(n).appendTo($tr);
  var $td2 = $("<td />").append("<select id='drop" + n + "' class='select-service' name='prodService[]' />").appendTo($tr);
  var $td3 = $("<td id='desc" + n + "' />").appendTo($tr);
  var $td4 = $("<td />").append("<a href='#' class='remove'>Delete</a>").appendTo($tr);

  $("table").append($tr);
  n++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="add-new-row">Add New Row</button>

<table></table>

Answer 2

使用jQuery很好，因为您可以避免编写这些巨大的元素字符串，因此，我继续编写了addnewrow()函数，以（希望）使其更加简洁。

就确定ID而言，虽然我相信talg123在注释中建议的内容很好-存储每次添加新行时仅增加1的全局变量-我个人试图避免污染全局范围我可以。

您可以使用此行找到最后一个drop ID，并从其中删除"drop"文本，以便只剩下一个数字。

$("tr select").last().attr("id").replace("drop", "");

不幸的是，如果没有行，这将中断，因为它将无法找到任何select元素。因此，首先我们必须检查它们是否存在：

+$("tr select").length ? (exists) : (does not exist)

如果不存在，我们将仅使用1。

将它们放在一起，您将得到：

//If select exists      Get last ID and remove "drop" from it, and add 1       Else, 1
$("tr select").length ? 1 + +$("tr select").last().attr("id").replace("drop", "") : 1;

$('body').on("click", '.remove', function() {
  $(this).closest("tr").remove();
});

$('body').on('click', '.add-new-row', function() {
  var nextId = $("tr select").length ? 1 + +$("tr select").last().attr("id").replace("drop", "") : 1;

  //Create a new select list
  var $selectList = $("<select id='drop" + nextId + "' class='select-service' name='prodService[]' />");
  $selectList.append("<option> -Select Service- </option"); //Append option 1
  $selectList.append("<option> Another example </option");  //Append option 2

  var $tr = $("<tr />");                                          //Create a new table row
  var $td1 = $("<td />").text(nextId).appendTo($tr);              //Create first cell. Set text to nextId. Add it to the row.
  var $td2 = $("<td />").append($selectList).appendTo($tr);       //Create second cell. Add our select list to it. Add it to the row.
  var $td3 = $("<td id='desc" + nextId + "' />").appendTo($tr);   //Create third cell. Set its id to 'desc{nextId}'. Add it to the row.
  var $td4 = $("<td />").append("<a href='#' class='remove'>Delete</a>").appendTo($tr);  //Create fourth cell. Add link to it. Add it to the row.

  $("table").append($tr);   //Add the row to the table
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="add-new-row">Add New Row</button>

<table></table>

添加行然后删除会导致重复行

2 个答案: