Question

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

类型错误：无法读取属性＆＃39; childNodes＆＃39;未定义？

在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>

Answer 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>

Answer 2

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

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

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

的值

JavaScript类型错误＆＃39; childnodes＆＃39;未定义

2 个答案: