JavaScript Type Error 'childnodes' undefined

Sie müssen Zeilen in der HTML-Tabelle dynamisch hinzufügen/entfernen, indem Sie JavaScript verwenden, um einen Typfehler zu erhalten.JavaScript Type Error 'childnodes' undefined

Typ Fehler: Kann die Eigenschaft 'childNodes' von undefined nicht lesen?

Fängt diese Ausnahme während der Ausführung der deleteRow-Funktion zur Laufzeit ab.

Wenn Sie auf Zeile hinzufügen klicken, wird eine dynamische Zeile erstellt und in die Tabelle eingefügt. Wenn Sie das Kontrollkästchen markieren und auf Zeile löschen klicken, wird die Zeile entfernt.

Folgendes ist die Quelle.

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

Quelle

2017-01-31 Celery

Es gibt nur drei Zellen in 'table.rows [0]'. Vielleicht möchten Sie die Schleife von "1" anstatt von "0" starten? – Teemu

ich kann nicht glauben, dass ich das verpasst habe: p – Celery

sich für null bei der bedingten Prüfung suchen, würde ich es wie folgt umschreiben:

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

, die den Fehler zu vermeiden, sollte sein geworfen, aber möglicherweise nicht die Zeile gelöscht, wenn die Zelle mit Index 3 nicht ex ist. Überprüfen Sie den Wert des rechten Zellenindexes row.cells[YOUR_CELL_INDEX_HERE].childNodes[0]

Quelle

2017-01-31 19:43:49 JorgeObregon

Ich bin nicht ganz sicher, was Sie versuchen zu tun, aber der Grund für die Ausnahme ist, dass Sie das Element zuzugreifen versuchen, die nicht existiert.

Diese Zeile gibt den Fehler row.cells[3].childNodes[0], da Sie keine row.cell[3] Eigenschaft haben. Die row.Cells hat Länge 3, aber da der Index von 0 beginnt, können Sie auf das letzte Element mit row.cells[2] verweisen. Sie erhalten undefined und daher row.cells[3].childNodes[0] Methode funktioniert nicht.

Änderung es 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>

Quelle

2017-01-31 19:41:47 Agalo

das löst das Problem nicht – Celery

Das sollte die Ausnahme vermeiden. Erhalten Sie immer noch den gleichen Fehler? – Agalo

ja gerade lief es, der gleiche Fehler – Celery

JavaScript Type Error 'childnodes' undefined

Antwort

Verwandte Themen