开发者社区> 问答> 正文

jquery 隔行变色功能

<!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上的开发工具也检查不出来

展开
收起
小旋风柴进 2016-03-23 15:39:16 2224 0
1 条回答
写回答
取消 提交回答
  • TR 标签能加颜色的吗?汗。
    把这个#tbSut .trOdd{background-color:#fff}
    改成:#tbSut .trOdd td{background-color:#fff}

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

    2019-07-17 19:11:21
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
23-Vue.js在前端...1506518547.pdf 立即下载
Javascript中的函数 立即下载
JavaScript函数 立即下载