Javascript Type Error 'childnodes' Undefined

July 31, 2024 Post a Comment

Need to Dynamically Add/Remove rows in HTML table using JavaScript getting a type error. Type Error: cannot read property 'childNodes' of undefined? Catches this exception in run t

Solution 1:

By looking at the conditional checking for null, I would rewrite it like this:

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

That should avoid the error being thrown, but might not get the row deleted if the cell with index 3 doesn't exist. Consider checking the value of the right cell index row.cells[YOUR_CELL_INDEX_HERE].childNodes[0]

Solution 2:

I am not entirely sure what you are trying to do, but the reason for exception is that you are trying to access the element which doesn't exists.

This line is giving the error row.cells[3].childNodes[0] since you do not have row.cell[3] property. The row.Cells has length 3 but since the index starts from 0, you can refer to the last element using row.cells[2] You get undefined and hence row.cells[3].childNodes[0] method doesn't work.

change it to row.cells[2].childNodes[0]

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

functioninsertEntry(f) {

var test = 0;

    //local array collects input valuesvar a = newArray();

    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");
    } 
    elseif(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 = "";
    }
}

        functiondeleteRow(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><tableid="manualEntryInputTable"><tr><td><b>T</b></td><td><b>C</b></td><td><b>Q</b></td></tr><tr><tdclass="label"><inputsize=""type="text"name="ticker"value="" ></td><tdclass="label"><inputsize=""type="text"name="cusip"value=""></td><tdclass="label"><inputsize=""type="text"name="quantity"style="text-align: right;"value=""></td><td><inputtype="button"onClick="insertEntry(this.form)"value="Add"/></td><td><inputtype="button"onClick="deleteRow(this.form)"value="Delete"/></td></tr></table></form></body></html>

JavaScript General

Javascript Type Error 'childnodes' Undefined

Solution 1:

Solution 2:

Post a Comment for "Javascript Type Error 'childnodes' Undefined"