javascript - 如何使用 javascript 获取 html 表格单元格的内容 javascript 根据复选框

Question

我有一个 html 格式的复选框数组，表中的一些数据如下

<table border=1 id='products'>
  <tr><td>item id</td><td>item Name</td><td>item Price</td></tr>

  <tr><td><input type='checkbox' id='p[]' name='prices[]'  onClick='getPrice()'></td><td>Rice</td><td>300</td></tr>
  <tr><td><input type='checkbox' id='p[]' name='prices[]'  onClick='getPrice()'></td><td>Sugar</td><td>200</td></tr>
  <tr><td><input type='checkbox' id='p[]' name='prices[]'  onClick='getPrice()'></td><td>Tea</td><td>100</td></tr>
  </table>

如何获取选中复选框的表格同一行中第三个单元格的内容？ 我在 javascript getPrice() 中创建了一个函数，但我不知道应该在 if 语句中写什么

<script>

   function getPrice()
  {
     if (document.getElementById('p[]').checked) 
      {

      } else {

      }
 }
</script>

Answer 1

首先，我建议在 onClick 属性上使用 addEventListener - 这将为我们提供一个可用于定位的事件不查询选择器的元素。

我还建议存储此数据并以不同于获取 HTML 标记内容的方式访问它 - data attributes是一个得到良好支持的标准。

我也冒昧地整理了表格标记，因此它具有语义上正确的标题和正文:

<table border=1 id='products'>
  <thead>
    <tr>
      <th>item id</th>
      <th>item Name</th>
      <th>item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='checkbox' data-product='rice' data-price='300'></td>
      <td>Rice</td>
      <td>300</td>
    </tr>
    <tr>
      <td><input type='checkbox' data-product='sugar' data-price='200'></td>
      <td>Sugar</td>
      <td>200</td>
    </tr>
    <tr>
      <td><input type='checkbox' data-product='tea' data-price='100'></td>
      <td>Tea</td>
      <td>100</td>
    </tr>
  </tbody>
 </table>

有了这个，我们可以重写 JS 来为每个输入添加一个事件监听器:

let inputs = document.querySelectorAll('input[type="checkbox"]')

for (let input of inputs) {
    input.addEventListener('click', (event) => {
        const product = event.target.dataset.product
        const price = event.target.dataset.price
    })
}

document.querySelectorAll 返回与页面上的选择器匹配的所有元素的数组。

然后我们可以迭代这个数组，对每个输入执行相同的操作 - 在本例中，应用一个事件监听器。

此事件监听器将用于“点击”事件，第二个参数是触发事件时将运行的函数。

第二个函数的参数是event，其中包含有关事件的所有信息。我们可以使用 event.target 获取被点击的元素，然后使用 event.target.dataset 获取该 HTML 元素的所有数据属性。