Question

我正在尝试链接每行的按钮，以便在单击时删除该行。但是，每个删除按钮都链接到最后创建的行的onclick删除。

例如：

表格

记录1 | deleteButton1

记录2 | deleteButton2

记录3 | deleteButton3

操作

点击deleteButton1 ---＆gt; 删除带有“记录3”的行

点击deleteButton1 ---＆gt; 尝试删除带有“Record 3”的行（a.k.a。没有找到b / c行没有找到）

点击deleteButton2 ---＆gt; 尝试删除带有“Record 3”的行（a.k.a。没有找到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循环之后，该变量将设置为数组中的最后一项。因此，每个按钮都会引用最后一项。 Here is a demonstration

我建议使用Javascript的parentNode和rowIndex来允许按钮引用自己的父行。

在下面的示例中，rowIndex返回tr的索引号，该parentNode是所点击的单元格td（cell2.onclick = function () { removeRow(this.parentNode.rowIndex); }; function removeRow(x) { document.getElementById("Table").deleteRow(x); }）。此索引号可用于直接删除表行。

{{1}}

Working Example (jsFiddle)

OnClicks链接到错误的按钮

2 个答案: