使用javascript从tr td内部访问输入类型文本值

Question

我是 Web 开发的新手，在尝试迭代表行数据值时不断陷入错误......我已经搜索并阅读了很多地方。

首先我想访问table tr td text

我已经使用某人文章中的 JavaScript 代码完成了这项工作，因为我想访问 td 输入类型的文本值，所以效果很好......我无法做到这一点

var myTab = document.getElementById('invoiceTable');
for (i = 1; i < myTab.rows.length; i++) {


  var objCells = myTab.rows.item(i).cells;

  for (var j = 0; j < objCells.length; j++) {
    var descriptionInvoice = objCells.item(3).innerHTML;

  }
}

<table id="invoiceTable">
  <thead>
    <tr>
      <th>Sno</th>
      <th>Description</th>
      <th>Unit</th>
      <th>quantity</th>
      <th>Price</th>
      <th>discount</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>HANON BALLON</td>
      <td>PIECE </td>
      <td><input type="text" name="" id="" value="1" required=""> </td>
      <td>232</td>
      <td><input class="" type="text" name="discount" value="0"></td>
      <td>
        <i class="far fa-trash-alt btnDelete"></i>
      </td>
    </tr>
  </tbody>
</table>

我已访问该行但无法访问输入类型文本值

Answer 1

您可以通过选择器获取所有#invoiceTable's td's 输入字段与类型文本

document.querySelectorAll('#invoiceTable td input[type="text"]')

然后您可以使用 forEach 遍历元素并通过访问 .value 属性读取其值。 注意：如果您愿意，也可以使用老式的 for 循环

.forEach(x => {
    console.log(x.value);
  }
);

// access all <td> input type texts value
document.querySelectorAll('#invoiceTable  td input[type="text"]').forEach(x => {
    console.log(x.value);
  }
);

<table id="invoiceTable">
  <thead>
    <tr>
      <th>Sno</th>
      <th>Description</th>
      <th>Unit</th>
      <th>quantity</th>
      <th>Price</th>
      <th>discount</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>HANON BALLON</td>
      <td>PIECE </td>
      <td><input type="text" name="" id="" value="1" required=""> </td>
      <td>232</td>
      <td><input class="" type="text" name="discount" value="0"></td>
      <td>
        <i class="far fa-trash-alt btnDelete"></i>
      </td>
    </tr>
  </tbody>
</table>