会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132360个问题
JAVA 全系列/第三阶段:数据库编程/SQL 语言 38342楼
JAVA 全系列/第一阶段:JAVA 快速入门/数组和数据存储 38344楼
Python 全系列/第一阶段:Python入门/控制语句 38347楼
Python 全系列/第一阶段:Python入门/序列 38348楼
Python 全系列/第七阶段:网页编程基础/面向对象编程 38350楼
JAVA 全系列/第一阶段:JAVA 快速入门/控制语句、方法、递归算法 38351楼
JAVA 全系列/第三阶段:数据库编程/SQL 语言 38352楼
JAVA 全系列/第二十四阶段:高性能Web平台/Lua语言快速入门 38353楼
JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 38354楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery-1.12.3.min.js"></script>
  <style>
    table tr td{
      width: 60px;
      height: 30px;
    }
/*    table tr:nth-child(2n+1) td:nth-child(2n+1){
      background-color: black;
    }
    table tr:nth-child(2n) td:nth-child(2n){
      background-color: black;
    }*/
  </style>
</head>
<body>
<table border="1px" align="center" cellspacing="0">
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<script>
  // $('tr:odd td:odd').css('background-color','black');
   $('tr:eq(0) td:odd').css('background-color','black');
   $('tr:eq(2) td:odd').css('background-color','black');
   $('tr:eq(4) td:odd').css('background-color','black');
   $('tr:eq(1) td:even').css('background-color','black');
   $('tr:eq(3) td:even').css('background-color','black');
   $('tr:eq(5) td:even').css('background-color','black');
</script>
</body>
</html>

老师,您好

问题1:

image.png

我想达到表格这个效果,使用css代码

/*    table tr:nth-child(2n+1) td:nth-child(2n+1){
      background-color: black;
    }
    table tr:nth-child(2n) td:nth-child(2n){
      background-color: black;
    }*/

或者js代码

   $('tr:eq(0) td:odd').css('background-color','black');
   $('tr:eq(2) td:odd').css('background-color','black');
   $('tr:eq(4) td:odd').css('background-color','black');
   $('tr:eq(1) td:even').css('background-color','black');
   $('tr:eq(3) td:even').css('background-color','black');
   $('tr:eq(5) td:even').css('background-color','black');

都可以,老师使用css和js达到效果,有什么不同的使用条件么


问题二:

  // $('tr:odd td:odd').css('background-color','black');
   $('tr:eq(0) td:odd').css('background-color','black');
   $('tr:eq(2) td:odd').css('background-color','black');
   $('tr:eq(4) td:odd').css('background-color','black');
   $('tr:eq(1) td:even').css('background-color','black');
   $('tr:eq(3) td:even').css('background-color','black');
   $('tr:eq(5) td:even').css('background-color','black');

老师 我之前想使用后代元素来达到效果,就是我注释的第一行,效果是这样的,并不能达到想要的效果

image.png

想问问老师,js是想实现这个效果,代码能不能更简洁一点,我的这个太麻烦了,当表格更大的话,很不方便操作

   $('tr:eq(0) td:odd').css('background-color','black');
   $('tr:eq(2) td:odd').css('background-color','black');
   $('tr:eq(4) td:odd').css('background-color','black');
   $('tr:eq(1) td:even').css('background-color','black');
   $('tr:eq(3) td:even').css('background-color','black');
   $('tr:eq(5) td:even').css('background-color','black');

谢谢老师!

WEB前端全系列/第三阶段:jQuery编程模块/jQuery基础知识(旧) 38355楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637