jQuery实现表格隔列变色

最新推荐文章于 2022-11-09 11:37:42 发布

野草闲花逢春生

最新推荐文章于 2022-11-09 11:37:42 发布

阅读量584

点赞数

分类专栏：前端学习笔记文章标签： html jquery

本文链接：https://blog.csdn.net/qq_42918876/article/details/119065403

版权

本文介绍了使用jQuery实现表格隔列变色的两种方法：按行操作和按单元格位置判断。强调不能简单地按偶数或奇数列变色，以防当表格列数为奇数时出现错误的棋盘样式。

摘要由CSDN通过智能技术生成

表格隔列变色

可以有两种思路：

思路一：可以将每一行作为单独操作单位，让每一行中的列进行隔列变色

    // 可以将每一行作为单独操作单位，使用each 方法，让每一行中的列进行隔列变色
    var $tr = $("tr");
    $tr.each(function () {
   
      // 让子级所有的列隔列变色
      $(this).children(":odd").css("background","skyblue")
    })

思路二：可以判断当前这个 td 在父级中所处的位置（下标），根据所处位置来实现格列变色，比如判断下标为偶数则赋为一种颜色。

$("td").each(function () {
   
  // 可以判断 当前这个 td 在父级中所处的位置
  if ($(this).index() % 2 === 0) {
   
    $(this).css("background","skyblue")
  }
})

效果如图：
在这里插入图片描述

错误演示
可能刚开始学的时候，会有同学直接选择偶数列变色或者奇数列变色，如下

	$("td:even").css("background","skyblue")

这种写法，在表格的总列数正好为偶数时是没有问题的，但是一旦总列数变为奇数，就会出错，显示成棋盘的样式。结果如图：
在这里插入图片描述
所以要注意，不能简单的写成偶数列变色或者奇数列变色。

附html结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"