jQuery使用动态ID将行添加到表中

Question

http://jsfiddle.net/waH5S/6/

function add_row_retail() {
            $(document).ready(function () {
                var table = document.getElementById("Retail");
                var row = table.insertRow(-1);
                var row_id = $('#Retail').val('tr[id]:last');
                console.log(row_id);
                var cell_init = row.insertCell(-1);
                cell_init.innerHTML = "blank";
            });
        }

我试图在添加的行之前获取表行的ID（ <tr> ），然后使用适当的parseint（...）将其添加1。 接下来，对单元格（ <td> ）进行同样的操作，以便每个单元格都具有每个表的唯一ID。 我似乎找不到行的ID。

这是我的问题的“正确”代码

function add_row_retail() {
    var table = document.getElementById("Retail");

    // Row id
    var row_id = $('#Retail tr:last').attr('id');
    var row = table.insertRow(-1);
    var next_row_id = "tr_" + (1+parseInt(row_id.match(/\d+/)[0],10));
    $(row).attr('id', next_row_id);

    for (var i = 0; i < 8; i++) {
        var cell_id = $('#Retail td:last').attr('id');
        console.log(cell_id);
        var next_cell_id = "td_" + (1+parseInt(cell_id.match(/\d+/)[0],10));        console.log(next_cell_id);
        var cell = row.insertCell(-1);
        $(cell).attr('id', next_cell_id);
        $(cell).innerHTML = "blank";
    }
}

Answer 1

而不是$('#Retail').val('tr[id]:last'); 我想你要：

var row_id = $('#Retail tr:last').attr('id')

该选择器在#Retail元素下找到最后一个tr，并返回其id属性。

jQuery的最后一个选择器： http : //api.jquery.com/last-selector/

---

下一个问题：ID不能以数字开头。 重命名您的ID，例如“ tr_1”，“ tr_2”等。

---

下一个问题：要从字符串中提取数字：

"tr_123".match(/\d+/)[0]; // returns 123.

加1：

var next_id = "tr_" + (1+parseInt("tr_123".match(/\d+/)[0],10));

---

然后，设置您的新ID。

var row = table.insertRow(-1);
...
$(row).attr('id', next_id);