jquery 隔行变色功能-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jquery 隔行变色功能

2016-03-23 15:39:16 1852 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EW"
"http://www.w3.org/TR/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--插入脚本 载入jquery-1.4.2.min.js文件 结束脚本-->
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<!--定义样式-->
<style type="text/css">
<!--定义 body身体的尺寸 tbStu大小 和颜色 tbSut tr-->
body{font-size:12px;text-align:center}
#tbStu{width:260px;border:soild 1px #666;background-color:#eee}
#tbSut tr{line-heiht:23px}
#tbSut tr th{background-color:#ccc;color:#fff}
#tbSut .trOdd{background-color:#fff}
<!--结束定义样式-->
</style>
<!--脚本插入-->
<script type="text/javascript">
<!--创建函数-->
$(function()
{
    <!--查询到tbStu tr nth-child(even) 分别匹配序号为奇数与偶数的元素 增加trOdd 设置颜色-->
    $("#tbStu tr:odd").addClass("trOdd");
})
<!--结束脚本插入-->
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
        </tr>
        <tr>
            <td>1001</td><td>张小明</td><td>男</td><td>320</td>
        </tr>
        <tr>
            <td>1002</td><td>李明琪</td><td>女</td><td>350</td>
        </tr>
    </tbody>
</table>
</body>
</html>
为什么改变不了?
tbSut tr th{background-color:#ccc;color:#fff}
tbSut .trOdd{background-color:#fff}

这两段书上是这么写的 但是发现执行不到这两个在IE上的开发工具也检查不出来

取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:11:21

    TR 标签能加颜色的吗?汗。
    把这个#tbSut .trOdd{background-color:#fff}
    改成:#tbSut .trOdd td{background-color:#fff}

    又或者
    $("tr:nth-child(odd)").css("background","#fff");

    0 0
相关问答

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 160135浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 96802浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 149094浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 148318浏览量 回答数 31

43

回答

【精品问答集锦】Python热门问题

小六码奴 2019-05-30 15:27:34 145221浏览量 回答数 43

82

回答

OSS入门教程

belle.zhoux 2014-07-07 17:14:27 160452浏览量 回答数 82

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 86620浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81882浏览量 回答数 13

24

回答

【精品问答】python技术1000问(1)

问问小秘 2019-11-15 13:25:00 486954浏览量 回答数 24

27

回答

阿里云开源软件镜像站点上线啦!!

qilu 2014-01-06 18:14:06 97428浏览量 回答数 27
2710
文章
6591
问答
问答排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载