使用javascript中的类选择表单元格

Select table cell using class in javascript

本文关键字：选择 表单 单元格 javascript 使用      更新时间：2023-09-26

有没有一种方法可以通过在单元格上使用"class"来选择表单元格。好的例子胜过1000个单词。。。

如何使用javascript选择元素以仅在表中选择.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>

您可以使用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>

应该使用委托，而不是遍历包含redcell类的每个元素。在这种情况下，您不需要为动态添加的<td>添加另一个事件侦听器，而且代码看起来更干净。

将click事件监听器添加到<td>的一个祖先元素中。这里，祖先元素可以是<table>。单击<td>时，将调用单击事件处理程序。通过event.target查找单击的元素信息，如果event.targe是<td>并且具有redcell类，则执行您的逻辑。

请参阅演示。

在jQuery中，您可以使用以下选择器只选择具有redcell类的td元素：

$("td.redcell")

它在纯JS中的等价物：

document.querySelectorAll('td.redcell');
相关文章：