jquery实现表格的隔行变色
2009-06-10 15:03
597 查看
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.datalist{
border-color:#669900;
font-family:Arial, Helvetica, sans-serif;
border-collapse:collapse;
background-color:#66CC99;
}
.datalist th{
background-color:#669900;
}
.datalist tr.altrow{
background-color:#6699CC;
}
</style>
<script src="jquery.min.js"></script>
<!--
<script type="text/javascript">
window.onload = function(){
var oTable = document.getElementById("oTable");
for( var i=0;i<oTable.rows.length;i++){
if(i%2==0)
oTable.rows[i].className="altrow";
}
}
</script>
-->
<script type="text/javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
</script>
</head>
<body>
<table border=1px class="datalist" id="oTable">
<tr>
<th>name</th>
<th>class</th>
<th>birthday</th>
<th>mobile</th>
<th>adress</th>
</tr>
<tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr>
<tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr><tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr><tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr><tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.datalist{
border-color:#669900;
font-family:Arial, Helvetica, sans-serif;
border-collapse:collapse;
background-color:#66CC99;
}
.datalist th{
background-color:#669900;
}
.datalist tr.altrow{
background-color:#6699CC;
}
</style>
<script src="jquery.min.js"></script>
<!--
<script type="text/javascript">
window.onload = function(){
var oTable = document.getElementById("oTable");
for( var i=0;i<oTable.rows.length;i++){
if(i%2==0)
oTable.rows[i].className="altrow";
}
}
</script>
-->
<script type="text/javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
</script>
</head>
<body>
<table border=1px class="datalist" id="oTable">
<tr>
<th>name</th>
<th>class</th>
<th>birthday</th>
<th>mobile</th>
<th>adress</th>
</tr>
<tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr>
<tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr><tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr><tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr><tr>
<td>zhanfsan</td>
<td>three</td>
<td>1986-3-21</td>
<td>34</td>
<td>44444</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery实现表格隔行变色
- jquery 实现表格隔行变色
- 用JQuery实现表格隔行变色和突出显示当前行
- jQuery实现table表格隔行换色鼠标经过变色
- JQuery实现表格隔行变色，鼠标经过的行放大显示
- 简单的jQuery实现表格隔行变色以及鼠标划上突出显示
- jQuery实现table表格隔行换色鼠标经过变色
- jquery实现隔行变色，点击换色，鼠标悬浮当前行变色效果,div+css 细表格样式
- JQuery实现表格隔行换色，鼠标移动变色，点击选择变色
- jQuery轻松实现表格的隔行变色，点击行变色
- [原创]持续给力：jQuery实现表格隔行变色效果案例详解
- 用JQuery实现表格隔行变色和突出显示当前行的代码
- 用JQuery实现表格隔行变色和突出显示当前行
- jQuery轻松实现表格的隔行变色，点击行变色
- 利用jQuery实现表格的隔行变色、高亮显示
- jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
- 使用原生js和jQuery实现表格的隔行变色
- 用JQuery实现表格隔行变色和突出显示当前行
- jQuery轻松实现表格的隔行变色和点击行变色的实例代码
- 用JQuery实现表格隔行变色和突出显示当前行的代码