Javascript Can'；不要删除第一行 属性 瓦尔

调用此单独的js文件：

<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')" />

函数deleteARow（tID）{
试一试{
var tableObj=document.getElementById（tID）；
var numRows=tableObj.rows.length；
//从1开始，因为从不删除包含表标题的行
对于（var index=1；index

此代码可以在单击“删除”按钮后删除任意行和任意数量的行，但第一行有复选框（其xpath为//table/tr[1]）除外。我已经多次手动跟踪代码，但无法调试它，因此我将代码与注释一起发布

---

代码怎么了？我希望我能弄清楚如何在firebug中使用js调试器：（

您的代码有一些问题

首先，表的标记格式不正确。您有

td

，但没有父项

tr

其次，用于获取checkbox对象的逻辑没有返回复选框。因此，当您点击

if

语句时，

chkboxObj.checked

返回

未定义的

以下是更新/工作代码：

HTML

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


属性
瓦尔

JavaScript

<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')" />

函数deleteARow（tID）{
试一试{
var tableObj=document.getElementById（tID）；
var numRows=tableObj.rows.length；
//从1开始，因为从不删除包含表标题的行
对于（var index=1；index

还有，这里是。
var rowObj=tableObj.rows[i]；//这个“i”在哪里从？供参考，您的HTML代码在
表
标记中无效。如果您使用
和
标记，您的运气可能会更好。您从索引
1
开始，而不是
0
？如果您在这样的事情上向下循环，则会更容易。当我尝试调试时，chkboxj.checked是未定义的。您的第一个任务是如何完成的行的创建方式与其他行不同？也许您创建第二行的方式与创建复选框的方式不同？
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