jQuery隔行变色与普通JS写法的对比

ttx9n · 发表于 2013-4-21 16:43:09

普通JS写法与jQuery选择器写法,选择table的行，隔一行，选择一行，感兴趣的朋友可以参考下哈，希望对你有所帮助复制代码代码如下:
<style type="text/css">
body {
font-size:12px;text-align:center;
}
#tbStu {
width:260px;border:1px solid #666;background-color:#eee;
}
#tbStu tr {
line-height:23px;
}
#tbStu tr th {
background-color:#ccc;color:#fff;
}
#tbStu .trOdd {
background-color:#fff;
}
</style>
<script src="jQuery/jquery-1.9.1.js"></script>
<script type="text/javascript">
//普通JS写法
//window.onload = function () {
// var oTb = document.getElementById('tbStu');
// for (var i = 0; i < oTb.rows.length-1; i++) {
// if (i % 2)
// {
// oTb.rows[i].className = "trOdd";
// }
// }
//}
//jQuery选择器写法（选择table的行，隔一行，选择一行）
$(function () {
$('#tbStu tr:nth-child(even)').addClass("trOdd");
//jQuery给一个DIV复制内容时，不需要检测该DIV是否存在
// $('#divMain').html('这是一个检测页面');
})
</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>
<tr>
<td>1003</td><td>张三</td><td>男</td><td>150</td>
</tr>
</tbody>
</table>
</body>

xf9hlg1 · 发表于 2022-8-9 01:36:49

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

黑白键 · 发表于 2022-12-13 20:39:36

挺不错的东西

adm1n · 发表于 2023-2-23 14:40:54

天天源码社区论坛

z835648964 · 发表于 2023-5-11 07:38:23

快更新啊，我擦

uj9lpc · 发表于 2023-5-25 04:39:52

iiguuubhuiuihu

qwe520 · 发表于 2023-6-23 23:56:26

管灌灌灌灌灌灌灌灌灌灌

j__j33p · 发表于 2023-9-2 04:02:53

看看看咋么

cxst1h57 · 发表于 2023-9-17 00:00:46

还可以不错

5vulod · 发表于 2023-11-11 11:51:55

老衲笑纳了

账号		自动登录	找回密码
密码			立即注册

[JavaScript] jQuery隔行变色与普通JS写法的对比

相关帖子