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