如何实现选中单元格所在行和列变色

发布时间：2023-05-23

一、选中单元格所在行变色

选中单元格所在的行变色功能，在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个单元格节点，并将其背景色设置为浅灰色。这样就可以实现选中列变色了。

推荐文章