如何實現選中單元格所在行和列變色

一、選中單元格所在行變色

選中單元格所在的行變色功能，在Web開發中是一個非常常見且實用的功能。下面我們將介紹如何用JavaScript和jQuery實現這個功能。

JavaScript實現：

<script>
function changeRowColor() {
  var table = document.getElementById("myTable");
  var cells = table.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    cells[i].onclick = function() {
      var row = this.parentNode;
      var siblings = row.getElementsByTagName("td");
      for (var j = 0; j < siblings.length; j++) {
        siblings[j].style.backgroundColor = "#fff";
      }
      row.style.backgroundColor = "#f2f2f2";
    }
  }
}
</script>

說明：

首先，通過getElementById()來獲取要操作的表格元素，在本例中是表格ID為myTable的表格。接着，通過getElementsByTagName()獲取表格中的所有單元格元素。接下來我們給所有單元格元素綁定onclick事件，當單元格被點擊後，就會執行該事件。

接着在事件處理函數中，先獲取當前單元格所在的行節點及該行節點下的所有同胞節點（即同一行的所有單元格節點）。接下來用循環語句遍歷所有同胞節點並將它們的背景色設置為白色，然後將當前行節點的背景色設置為淺灰色。這樣就可以實現選中行變色了。

jQuery實現：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#myTable td").click(function(){
    $(this).siblings().css("background-color","#fff");
    $(this).parent().css("background-color","#f2f2f2");
  });
});
</script>

說明：

我們首先加載了jQuery庫。在代碼中，通過選擇器選中表格中的所有單元格元素，然後給它們綁定了click事件。當單元格被點擊後，就會執行我們在事件函數中寫的兩行代碼：通過siblings()方法選中當前單元格的所有同胞節點並將它們的背景色設置為白色，然後將當前單元格所在的行節點的背景色設置為淺灰色。

二、選中單元格所在列變色

選中單元格所在的列變色功能同樣在Web開發中很常見，下面我們將介紹如何用JavaScript和jQuery分別實現這個功能。

JavaScript實現：

<script>
function changeColumnColor() {
  var table = document.getElementById("myTable");
  var cells = table.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    cells[i].onclick = function() {
      var colIndex = this.cellIndex;
      var rows = table.rows;
      for (var j = 0; j < rows.length; j++) {
        rows[j].cells[colIndex].style.backgroundColor = "#f2f2f2";
      }
    }
  }
}
</script>

說明：

首先，通過getElementById()獲取要操作的表格元素，在本例中是表格ID為myTable的表格。接着，通過getElementsByTagName()獲取表格中的所有單元格元素。接下來我們給所有單元格元素綁定onclick事件，當單元格被點擊後，就會執行該事件。

在事件處理函數中，首先獲取當前單元格所在的列索引，即第幾列。接着通過table.rows遍歷表格中的所有行節點，並根據當前單元格所在列的索引設置每一行節點下的第colIndex個單元格節點的背景色為淺灰色，從而實現選中列變色。

jQuery實現：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#myTable td").click(function(){
    var colIndex = $(this).index();
    $("#myTable tr").each(function(){
      $(this).find("td:eq("+colIndex+")").css("background-color","#f2f2f2");
    });
  });
});
</script>

說明：

同樣地，我們首先加載了jQuery庫。在代碼中，通過選擇器選中表格中的所有單元格元素，然後給它們綁定了click事件。當單元格被點擊後，就會執行我們在事件函數中寫的兩行代碼：首先通過index()方法獲取當前單元格所在的列索引，然後通過each()方法遍歷所有行節點，在每一行節點下查找第colIndex個單元格節點，並將其背景色設置為淺灰色。這樣就可以實現選中列變色了。