JavaScript類型錯誤'childnodes'undefined

需要動態添加/刪除HTML表格中的行，使用JavaScript獲取類型錯誤。JavaScript類型錯誤'childnodes'undefined

類型錯誤：無法讀取未定義的屬性'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>

來源

2017-01-31 Celery

'table.rows [0]'中只有三個單元格。你可能想從'1'而不是'0'開始循環？ – Teemu

我不敢相信我錯過了：p – Celery

通過查看null條件檢查，我會改寫這樣的：

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

這應該避免的錯誤是拋出，但如果索引爲3的單元格不存在，則可能無法刪除該行IST。考慮檢查右側單元格索引的值row.cells[YOUR_CELL_INDEX_HERE].childNodes[0]

來源

2017-01-31 19:43:49 JorgeObregon

我不完全確定你要做什麼，但是例外的原因是你試圖訪問不存在的元素。

由於您沒有row.cell[3]屬性，因此此行發出錯誤row.cells[3].childNodes[0]。 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>

來源

2017-01-31 19:41:47 Agalo

，這並沒有解決問題 – Celery

這應該避免例外。你仍然得到同樣的錯誤？ – Agalo

是的，只是跑它，同樣的錯誤 – Celery

JavaScript類型錯誤'childnodes'undefined

回答

相關問題