JavaScript 类型错误“子节点”未定义答案

【问题标题】：JavaScript Type Error 'childnodes' undefinedJavaScript 类型错误“子节点”未定义
【发布时间】：2017-06-17 09:16:53
【问题描述】：

需要使用 JavaScript 动态添加/删除 HTML 表中的行，获取类型错误。

类型错误：无法读取未定义的属性“childNodes”？

在 deleteRow 函数执行期间在运行时捕获此异常。

按下添加行时，将创建一个动态行并将其添加到表中。在选中复选框并按 Delete Row 时，该行将被删除。

以下是来源。

<html>
<head>
<script>
var b = new Array();
var entryListCounter = 0;
var counter = 0;

function insertEntry(f) {

var test = 0;

    //local array collects input values
    var a = new Array();

    a[0] = f.ticker.value;
    a[1] = f.cusip.value;
    a[2] = f.quantity.value;

    //store local array in entry list array
    b[entryListCounter] = a;

    entryListCounter++;


    if (a[0] == "" && a[1] == "" || a[2] == "") {
        console.log("val not filled");
    } 
    else if(a[0].length > 0 && a[1].length > 0){
        console.log("only fill one");
    }
    else {
        var table = document.getElementById("manualEntryInputTable");
        var row = table.insertRow(table.rows.length);

        var cell1 = row.insertCell(0);
        var t1 = document.createElement("input");
        t1.id = "t" + counter;
        cell1.appendChild(t1);

        var cell2 = row.insertCell(1);
        var t2 = document.createElement("input");
        t2.id = "c" + counter;
        cell2.appendChild(t2);

        var cell3 = row.insertCell(2);
        var t3 = document.createElement("input");
        t3.id = "q" + counter;
        t3.style = "text-align:right";
        cell3.appendChild(t3);

        var cell4 = row.insertCell(3);
        var t4 = document.createElement("input");
        t4.type = "checkbox";
        t4.name = "chkbox";
        cell4.appendChild(t4);

        f.quantity.value = "";
        f.cusip.value = "";
        f.ticker.value = "";
    }
}

        function deleteRow(e) {
            try {
            var table = document.getElementById("manualEntryInputTable");
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[3].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }




</script>

</head>

<body>
<form>
        <table id="manualEntryInputTable">
            <tr>
                <td><b>T</b></td>
                <td><b>C</b></td>
                <td><b>Q</b></td>
            </tr>
            <tr>
                <td class="label"><input size="" type="text" name="ticker"
                    value="" ></td>
                <td class="label"><input size="" type="text" name="cusip"
                    value=""></td>
                <td class="label"><input size="" type="text" name="quantity"
                     style="text-align: right;" value="">
                </td>
                <td><input type="button" onClick="insertEntry(this.form)" value="Add"/>
                </td>
                <td><input type="button" onClick="deleteRow(this.form)" value="Delete"/>
                </td>
            </tr>
        </table>
</form> 

</body>
</html>

【问题讨论】：

table.rows[0] 中只有三个单元格。您可能想从1 而不是0 开始循环？
我不敢相信我错过了：p

标签： javascript html function exception typeerror

【解决方案1】：

我不完全确定您要做什么，但异常的原因是您正在尝试访问不存在的元素。

这一行给出了错误row.cells[3].childNodes[0]，因为您没有row.cell[3] 属性。 row.Cells 的长度为 3，但由于索引从 0 开始，您可以使用 row.cells[2] 引用最后一个元素，您会得到未定义，因此 row.cells[3].childNodes[0] 方法不起作用。

改成row.cells[2].childNodes[0]

<html>
<head>
<script>
var b = new Array();
var entryListCounter = 0;
var counter = 0;

function insertEntry(f) {

var test = 0;

    //local array collects input values
    var a = new Array();

    a[0] = f.ticker.value;
    a[1] = f.cusip.value;
    a[2] = f.quantity.value;

    //store local array in entry list array
    b[entryListCounter] = a;

    entryListCounter++;


    if (a[0] == "" && a[1] == "" || a[2] == "") {
        console.log("val not filled");
    } 
    else if(a[0].length > 0 && a[1].length > 0){
        console.log("only fill one");
    }
    else {
        var table = document.getElementById("manualEntryInputTable");
        var row = table.insertRow(table.rows.length);

        var cell1 = row.insertCell(0);
        var t1 = document.createElement("input");
        t1.id = "t" + counter;
        cell1.appendChild(t1);

        var cell2 = row.insertCell(1);
        var t2 = document.createElement("input");
        t2.id = "c" + counter;
        cell2.appendChild(t2);

        var cell3 = row.insertCell(2);
        var t3 = document.createElement("input");
        t3.id = "q" + counter;
        t3.style = "text-align:right";
        cell3.appendChild(t3);

        var cell4 = row.insertCell(3);
        var t4 = document.createElement("input");
        t4.type = "checkbox";
        t4.name = "chkbox";
        cell4.appendChild(t4);

        f.quantity.value = "";
        f.cusip.value = "";
        f.ticker.value = "";
    }
}

        function deleteRow(e) {
            try {
            var table = document.getElementById("manualEntryInputTable");
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[2].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }




</script>

</head>

<body>
<form>
        <table id="manualEntryInputTable">
            <tr>
                <td><b>T</b></td>
                <td><b>C</b></td>
                <td><b>Q</b></td>
            </tr>
            <tr>
                <td class="label"><input size="" type="text" name="ticker"
                    value="" ></td>
                <td class="label"><input size="" type="text" name="cusip"
                    value=""></td>
                <td class="label"><input size="" type="text" name="quantity"
                     style="text-align: right;" value="">
                </td>
                <td><input type="button" onClick="insertEntry(this.form)" value="Add"/>
                </td>
                <td><input type="button" onClick="deleteRow(this.form)" value="Delete"/>
                </td>
            </tr>
        </table>
</form> 

</body>
</html>

【讨论】：

这应该避免异常。你仍然遇到同样的错误吗？
我在sn-p中粘贴了代码，我没有看到错误。

【解决方案2】：

通过查看null 的条件检查，我会这样重写它：

var chkbox = row.cells[3].childNodes.length ? row.cells[3].childNodes[0] : null;

这应该避免引发错误，但如果索引为 3 的单元格不存在，则可能不会删除该行。考虑检查右单元格索引的值row.cells[YOUR_CELL_INDEX_HERE].childNodes[0]

【讨论】：