使用javascript中的類選擇表格單元格

Question

有沒有一種方法可以通過使用單元格上使用的“類”來選擇表單元格。 好例子勝過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> 

Answer 1

您可以使用querySelectorAll() 演示

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>添加另一個事件偵聽器，而且代碼看起來更簡潔。

將單擊事件偵聽器添加到<td>的祖先元素之一。 在這里，祖先元素可以是<table> 。 當您單擊<td> ，將調用click事件處理程序。 通過event.target查找單擊的元素信息，如果event.target為<td>並具有redcell類，則執行您的邏輯。

看到這個演示 。

Answer 3

在jQuery中，您可以使用以下選擇器選擇帶有redcell類的td元素：

$("td.redcell")

它相當於純JS：

document.querySelectorAll('td.redcell');