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）