javascript - 无法读取属性 'childNodes' 复选框以从同一行获取值

Question

下面的代码应该让我获得表中复选框旁边的列的值，但是，单击按钮后，我将得到:

Cannot read property childNodes of null

注意:来自 firebase 的数据库，表中的值来自

表格图片:

rootRefReAgents.on("child_added", snap => {
  var AgentName = snap.child("Name").val();
  $("#table_body_Test").append("<tr><td>" + AgentName + "</td><td><INPUT TYPE=\"Checkbox\">  </Input></td></tr>");
});
}

function ActionData(){
  let agents = [];
  let table = document.getElementById("table_body_Test");
  let childNodes = Array.from(table.childNodes);
  // let childNodes = table.childNodes;
  for (let child of childNodes.values()) {
    console.log(`child: ${child}`);
    if (child.constructor.name !== "HTMLTableRowElement") {
        continue;
    }
    let agent = child.childNodes.item(1).innerHTML;
    console.log(`agent: ${agent}`);
    let checkbox = child.childNodes.item(3).childNodes.item(1);
    console.log(`checkbox: ${checkbox}`);
    console.log(checkbox.checked);
    if (checkbox.checked) {
        agents.push(agent);
    }
  }
  console.log(`agents: ${agents}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="testTable"  align="center">
  <thead>
    <tr style="color: #D2002E; background: #FFCC01; height:32px;">
      <td>Agents</td>
      <td>Select</td>
    </tr>
  </thead>
  <tbody id="table_body_Test">
  </tbody>
</table>
<button id="submitBtn" onclick="ActionData()">Next</button>

Answer 1

ES6 带来了简化代码及其阅读的新方法

const tableBody = document.querySelector('#testTable tbody' );

document.querySelector('#submitBtn').onclick=()=>
{
  let agents = [];

  console.clear();
  
  for (let rowX of tableBody.rows )
  {
    let
      agent    = rowX.cells[0].textContent,
      checkbox = rowX.cells[1].querySelector('input[type=checkbox]')
    ;
    console.log( 'agent:', agent, 'checked:', checkbox.checked);

    if (checkbox.checked) { agents.push(agent); }
  }
  console.log( 'agents (array):', agents.join(' / '));
}
/// bonus info :
/*
rootRefReAgents.on("child_added", snap=>{
  let 
    newRow    = tableBody.insertRow(-1);

    newRow.insertCell(0).textContent = snap.child("Name").val();
    newRow.insertCell(1).innerHTML   = '<input type="Checkbox">';
});

*/

#testTable { margin: auto; border-collapse: collapse }
#testTable thead tr {
  color: #D2002E;
  background: #FFCC01;
  height:32px;
  font-weight: bold;
}
#testTable tr:nth-child(even) {background-color: lightgrey }
#testTable td { border:1px solid grey; padding: 0 20px; }
#testTable td:nth-child(2) { text-align: center }

<table id="testTable">
  <thead>
    <tr> <td>Agents</td> <td>Select</td> </tr>
  </thead>
  <tbody>
      <tr> <td>AMC</td>      <td> <input type="checkbox" >  </td> </tr>
      <tr> <td>Mygulfex</td> <td> <input type="checkbox" >  </td> </tr>
      <tr> <td>topStar</td>  <td> <input type="checkbox" >  </td> </tr>
      <tr> <td>WMC</td>      <td> <input type="checkbox" >  </td> </tr>
  </tbody>
</table>

<button id="submitBtn" >see Selects in console</button>