因此,当我添加新行时,每行都有一个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>';
答案 0 :(得分: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>
答案 1 :(得分:0)
使用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>