为何JavaScript仅获取HTML表格tbody中第二行数据？原逻辑可获取全部行

之前通过表格ID可以获取全部行数据，但由于表格包含带合计行的footer，于是给tbody添加了IDtableRows来筛选有效数据行，现在却无法获取到第一行数据。

原代码 #

JavaScript #

function savePo() {
  let table = document.getElementById("tableRows");
  let [, ...tr] = table.querySelectorAll("tr");
  let tableData = [...tr].map(r => {
    let td = r.querySelectorAll("td");
    let test = [...td].map((c, j) => j == 9 ? (c.querySelectorAll('input[type="checkbox"]')[0].checked) : j == 8 ? c.innerText : c.querySelector('input').value)
    console.log("check " + test);
    return test;
  });
  console.log('Table Data: ' + tableData);
}

HTML #

<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:18%">Col 1</th>
      <th style="width:15%">Col 2</th>
      <th style="width:10%">Col 3</th>
      <th style="width:15%">Col 4</th>
      <th style="width:7%">Col 5</th>
      <th style="width:5%">Col 6(gsm)</th>
      <th style="width:7%">Col 7 (COP)</th>
      <th style="width:8%">Col 8 (m)</th>
      <th style="width:10%">Col 9</th>
      <th style="width:5%">Col 10</th>
    </tr>
  </thead>
  <tbody id='tableRows'>
    <tr>
      <td><input type="text" name="tableInputs" value="fdfdfdfd"></td>
      <td><input type="text" name="tableInputs" value="fsfdsfsfd"></td>
      <td><input type="text" name="tableInputs" value=""></td>
      <td><input type="text" name="tableInputs" value="100cot"></td>
      <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="1.63"></td>
      <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="273"></td>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="178" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
      <td><input type="checkbox" checked></td>
    </tr>
    <tr>
      <td><input type="text" name="tableInputs" value="ererewr"></td>
      <td><input type="text" name="tableInputs" value="vcbchbdgfh"></td>
      <td><input type="text" name="tableInputs" value=""></td>
      <td><input type="text" name="tableInputs" value="1f23dfdsn"></td>
      <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="1"></td>
      <td><input type="number" min="0" class="item-table-values" name="numberInputs" value="267"></td>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="176" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
      <td><input type="checkbox" checked></td>
    </tr>
  </tbody>
</table>
<button onClick=savePo()>
  Save PO
</button>

问题原因 #

问题出在这一行代码：

let [, ...tr] = table.querySelectorAll("tr");

这里使用了解构赋值，逗号,表示跳过第一个元素，所以tbody里的第一行<tr>被直接丢弃了，自然无法获取到它的数据。

解决方法 #

直接获取tbody下的所有<tr>元素即可，不需要跳过第一个：

修改后的JavaScript代码 #

function savePo() {
  let table = document.getElementById("tableRows");
  // 直接获取所有tr并转为数组
  let tr = [...table.querySelectorAll("tr")];
  let tableData = tr.map(r => {
    let td = r.querySelectorAll("td");
    let test = [...td].map((c, j) => j == 9 ? (c.querySelectorAll('input[type="checkbox"]')[0].checked) : j == 8 ? c.innerText : c.querySelector('input').value)
    console.log("check " + test);
    return test;
  });
  console.log('Table Data: ' + tableData);
}

或者也可以简化为：

let tr = table.querySelectorAll("tr");

后续map的时候再转为数组也可以，不过提前转成数组写法更直观。

这样修改后，就能正确获取tbody里的所有数据行，包括第一行。

内容的提问来源于stack exchange，提问作者onit