Select table 单元格在 javascript 中使用 class

Question

有没有一种方法可以通过在单元格上使用 'class' select table 单元格。好例子胜过1000字...

如何才能让我的select元素只在table中使用javascript到select.redcell？我需要分别为每个 td 插入函数，所以 td .redcell 和索引一样不是解决方案。

.redcell {background-color: red}

<table>
    <tr>
      <td> 1</td>
      <td>2</td>
      <td class="redcell">3</td>
      <td>4</td>
  </tr>
      <tr>
      <td> 1</td>
      <td class="redcell">2</td>
      <td>3</td>
      <td>4</td>
  </tr>
</table>
<div class="redcell">don't select me</div>

Answer 1

在jQuery中，你可以使用下面的select或select只有td元素与redcell class:

$("td.redcell")

它在纯 JS 中的等价物：

document.querySelectorAll('td.redcell');

Answer 2

你可以使用 querySelectorAll() DEMO

var cell = document.querySelectorAll('table td.redcell');
for (var i = 0; i < cell.length; i++) {
  cell[i].style.color = 'red';
}

更新：您可以像这样addEventListener每个单元格

var cell = document.querySelectorAll('table td.redcell');
cell[0].addEventListener('click', function() {
  this.style.color = 'red';
});

cell[1].addEventListener('click', function() {
  this.style.color = 'green';
})

<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td class="redcell">3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="redcell">2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<div class="redcell">don't select me</div>

Answer 3

与其遍历包含 redcell class 的每个元素，不如使用委派。在这种情况下，您不需要为动态添加的 <td> 添加另一个事件侦听器，而且代码看起来更清晰。

将点击事件侦听器添加到 <td> 的祖先元素之一。这里，祖先元素可以是<table>。当您单击 <td> 时，将调用单击事件处理程序。通过event.target找到被点击的元素信息，如果event.target是<td>并且有redcellclass，那么执行你的逻辑

看到这个demo。

Select table 单元格在 javascript 中使用 class

Select table cell using class in javascript

html

javascript

css

selector