2 
<table id="tableID">
    <tr>
        <th>Attr</th>
    <th>Val</th>
</tr>
<td>
    <input type="checkbox" name="firstChk" />
</td>
    <td>
    <input type="text" name="firstAttr" />
</td>
    <td>
        <input type="text" name="firstVal" />
</td>
</table>

<input type="button" value="Add A Row" onclick="javascript: addARow('tableID')" />
<input type="button" value="Delete" onclick="javascript: deleteARow('tableID')" />

这个单独的 js 文件被调用：

function deleteARow(tID) {
try {
    var tableObj = document.getElementById(tID);
    var numRows = tableObj.rows.length;

    // starts at 1 because never delete row that holds table headers
    for(var index=1; index < numRows; index++) {
        var rowObj = tableObj.rows[index];
    // rowObj.cells[0] gives the td, then childNodes[0] gives checkbox element
        var chkboxObj = rowObj.cells[0].childNodes[0];

            if(null != chkboxObj && true == chkboxObj.checked) {
            tableObj.deleteRow(index);
                /* next 2 lines are necessary because DOM's tr indices shift back
                 * with a deletion
                 */
                numRows--;
                index--;
        }
    } // end for
} // end try
catch(e) {
    alert(e);
}
} // end function

此代码可以在单击“删除”按钮后删除任何行和任意数量的行，除了具有复选框的第一行（xpath 为 //table/tr[1] 的行）。我已经多次手动跟踪代码并且无法调试它，所以我发布了代码和我的评论。

代码有什么问题？我希望我能弄清楚如何在 firebug 中使用 js 调试器:(

4

1 回答 1

1

您的代码存在一些问题。

首先，您的表格的标记格式不正确。你有td没有父母tr的。

其次，您用来获取复选框对象的逻辑没有返回复选框。因此，当您点击您的if声明时，chkboxObj.checked返回undefined.

这是更新/工作代码：

HTML

<table id="tableID">
    <tr>
        <th>Attr</th>
        <th>Val</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="firstChk" />
        </td>
        <td>
            <input type="text" name="firstAttr" />
        </td>
        <td>
            <input type="text" name="firstVal" />
        </td>
    </tr>
</table>
<input type="button" value="Add A Row" onclick="addARow('tableID')" />
<input type="button" value="Delete" onclick="deleteARow('tableID')" />

JavaScript

function deleteARow(tID) {
    try {
        var tableObj = document.getElementById(tID);
        var numRows = tableObj.rows.length;

        // starts at 1 because never delete row that holds table headers
        for (var index = 1; index < numRows; index++) {
            var rowObj = tableObj.rows[index];

            // rowObj.cells[0] gives the td, then childNodes[0] gives checkbox element
            // This was not returning the checkbox element. See updated code:

            // Get first input in row - this will be the checkbox
            var chkboxObj = rowObj.cells[0].getElementsByTagName("input")[0];

            if (chkboxObj != null && chkboxObj.checked == true) {
                tableObj.deleteRow(index);
                /* next 2 lines are necessary because DOM's tr indices shift back
                 * with a deletion
                 */
                numRows--;
                index--;
            }
        } // end for
    } // end try
    catch (e) {
        alert(e);
    }
} // end function

另外，这是一个工作小提琴。

于 2013-07-16T18:48:50.527 回答