Question

有没有办法可以通过使用＆＃39; class＆＃39;来选择表格单元格。在细胞上使用。好的例子好于1000字......

如何使用javascript选择元素，仅在表格中选择obj.x()？我需要分别为每个td插入函数，因此.redcell不是解决方案，也不是索引。

＆＃13;

td .redcell

＆＃13;

.redcell {background-color: red}

＆＃13;

Answer 1

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

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

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

请参阅此demo。

Answer 3

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

$("td.redcell")

它在纯JS中的等价物：

document.querySelectorAll('td.redcell');

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

3 个答案: