OnClicks鏈接到錯誤的按鈕

Question

我正在嘗試在每一行上鏈接按鈕，以在單擊時刪除該行。 但是，每個刪除按鈕都鏈接到最后創建的行的onclick刪除。

例如：

表

記錄1 | deleteButton1

記錄2 | deleteButton2

記錄3 | deleteButton3

動作：

單擊deleteButton1 ---> 刪除帶有“記錄3”的行

單擊deleteButton1 ---> 嘗試刪除帶有“記錄3”的行 （也就是未找到未發生的b / c行）

單擊deleteButton2 ---> 嘗試刪除帶有“記錄3”的行 （也就是未找到未發生的b / c行）

HTML：

<table id="Table"></table>

JavaScript：

//Code snippet
for (var x = 0; x < itemArray.length; x++) 
{
    selectedItem = itemArray[x];
    table = document.getElementById("Table");
    row = table.insertRow(table.rows.length);
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);

    cell1.innerHTML = selectedItem;
    cell2.innerHTML = "<button>—</button>";  //Delete button across every row.
    cell2.onclick = function () { removeRow(selectedItem); };
}

function removeRow(content, where) 
{ 
            var table;

            table = document.getElementById("Table");

            var iter;

            for (var i = 0; i < table.rows.length; i++) 
            {
                iter = table.rows[i].cells[0].innerHTML;

                if (iter == content)
                {
                    table.deleteRow(i);
                }
            }
}

Answer 1

您可能需要這樣的東西：

http://www.codingforums.com/javascript-programming/170869-dynamically-add-delete-reorder-rows-table.html

這里 ：

       for (var i= startingIndex; i< tbl.tBodies[0].rows.length; i++) {

            // CONFIG: next line is affected by myRowObject settings
            tbl.tBodies[0].rows[i].myRow.one.data = count; // text

            // CONFIG: next line is affected by myRowObject settings
            tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_FS; // input text
            tbl.tBodies[0].rows[i].myRow.two.id = INPUT_NAME_FS + count;

            tbl.tBodies[0].rows[i].myRow.three.name = INPUT_NAME_FS_DESIGN; // input text
            tbl.tBodies[0].rows[i].myRow.three.id = INPUT_NAME_FS_DESIGN + count;


            // CONFIG: next line is affected by myRowObj settings

            // CONFIG: requires class named classy0 and classy1
            tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);

            count++;
        }

Answer 2

每個onclick函數都引用變量selectedItem 。 在for循環之后，該變量將設置為數組中的最后一項。 因此，每個按鈕都將引用最后一個項目。 這是一個示范 。

我建議使用Javascript的parentNode和rowIndex允許按鈕引用其自己的父行。

在下面的示例中， rowIndex返回tr的索引號，該索引號是被單擊的單元格（ td ）的parentNode 。 該索引號可用於直接刪除表行。

cell2.onclick = function () {  removeRow(this.parentNode.rowIndex);  };

function removeRow(x) { 
    document.getElementById("Table").deleteRow(x);
}

工作示例（jsFiddle）