如何使用javascript javascript获取HTML表格单元格的内容，具体取决于复选框

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（）中创建了一个函数，但我不知道如果有陈述我应该写什么

<script>

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

      } else {

      }
 }
</script>

Answer 1

首先，我建议在onClick属性上使用addEventListener这将为我们提供一个可用于处理元素的event ，而无需查询选择器。

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

我也自由整理了表标记，因此它具有语义正确的标题和正文：

<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返回一个与页面上的选择器匹配的所有元素组成的数组。

然后，我们可以遍历此数组以对每个输入执行相同的操作-在这种情况下，应用一个eventListener。

此eventListener将用于'click'事件，第二个参数是触发事件时将运行的函数。

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

Answer 2

使用jQuery

 let total = 0; $('.item').on('change', function () { let newTotal = total; if ($(this).is(':checked')) { newTotal = total + Number($(this).parent().parent().find('td:eq(2)').text()) } else { newTotal = total - Number($(this).parent().parent().find('td:eq(2)').text()) } total = Math.max(newTotal, 0); $("#total").text(total); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border=1 id='products'> <tr><td>item id</td><td>item Name</td><td>item Price</td></tr> <tr><td><input type='checkbox' class="item"name='prices[]' ></td><td>Rice</td><td>300</td></tr> <tr><td><input type='checkbox'class="item" name='prices[]' ></td><td>Sugar</td><td>200</td></tr> <tr><td><input type='checkbox' class="item" name='prices[]' ></td><td>Tea</td><td>100</td></tr> </table> Total: <span id="total">0</span> 

Answer 3

您需要获取事件对象（ e ）。 事件对象目标是clicked元素。 获取if / else目标的checked属性。 如果选中，使用closest我们可以到达tr ，并找到所请求的孩子：

 document.querySelectorAll('#products [type=checkbox]') .forEach(function(input) { input.addEventListener('click', getPrice); }); function getPrice(e) { if(e.target.checked) { console.log(e.target.closest('tr').children[2].innerText); } else { console.log('not checked'); } } 

 <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[]'></td> <td>Rice</td> <td>300</td> </tr> <tr> <td><input type='checkbox' id='p[]' name='prices[]'></td> <td>Sugar</td> <td>200</td> </tr> <tr> <td><input type='checkbox' id='p[]' name='prices[]'></td> <td>Tea</td> <td>100</td> </tr> </table> 

Answer 4

这是我的方法：

  function getPrice() { var checkedValue=0; var inputElements = document.getElementsByClassName('checkbox'); for(var i=0; inputElements[i]; ++i){ if(inputElements[i].checked){ checkedValue += parseFloat(inputElements[i].value); } } alert(checkedValue); } 

 <table border=1 id='products'> <tr><td>item id</td><td>item Name</td><td>item Price</td></tr> <tr><td><input class="checkbox" type='checkbox' id='p-1' name='prices[]' onClick='getPrice()' value="300" ></td><td>Rice</td><td>300</td></tr> <tr><td><input class="checkbox" type='checkbox' id='p-2' name='prices[]' onClick='getPrice()' value="200"></td><td>Sugar</td><td>200</td></tr> <tr><td><input class="checkbox" type='checkbox' id='p-3' name='prices[]' onClick='getPrice()' value="100"></td><td>Tea</td><td>100</td></tr> </table> 

Answer 5

由于此方法使用querySelectorAll ，因此需要相对较新的浏览器

首先，选中该复选框并将其更改为Array以便我们可以对其进行map ：

var chk = Array.prototype.slice.call(document.querySelectorAll('[type=checkbox]:checked'));

然后map其map以获取邻近的td内容

var vals = chk.map(function(c){
    // c is the checkbox, 
    // its parent is the TD that contains the checkbox, 
    // the TD's parent is the TR that the checkbox reside
    // the children of the TR is the TDs that we are looking for
    // since you need to get the third column then get the third TD (start from 1, not 0)
    // get the third textContent
    return c.parentNode.parentNode.childNodes[3].textContent;
});

这样，您将获得所选复选框第三列的数组

您可以console.log(vals)查看内容

这是一个示例https://jsfiddle.net/665ap2u7/3/