jquery 双色表格实现代码
更新时间：2009年12月08日 00:45:23 作者：
上次用javascript实现了上色表格,见<JS实现双色表格>。但通过jQuery强大的选择器可更加简洁，优雅的实现。
https://www.jb51.net/article/21027.htm
不多说了，直接给代码
代码
<html>
<head>
<title>双色表格</title>
<style type="text/css">
<!--
table {
border:solid 1px black;
text-align:center;
border-spacing:0px;
}
th,td {
border:solid 1px black;
width:100px;
}
-->
</style>
<script src="lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
$().ready(function() {
$('tr:has(th)').css('background','violet'); //表格标题
$('tr:even:gt(0)').css('background','yellow'); //偶数行,且行数大于0(即标题)
$('tr:odd').css('background','olive'); //奇数行
});
</script>
</head>
<body>
<center>
<table>
<tr id="th">
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>张三</td>
<td>数学</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>数学</td>
<td>68</td>
</tr>
<tr>
<td>王五</td>
<td>英语</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>
不多说了，直接给代码
代码
复制代码 代码如下:
<html>
<head>
<title>双色表格</title>
<style type="text/css">
<!--
table {
border:solid 1px black;
text-align:center;
border-spacing:0px;
}
th,td {
border:solid 1px black;
width:100px;
}
-->
</style>
<script src="lib/jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
$().ready(function() {
$('tr:has(th)').css('background','violet'); //表格标题
$('tr:even:gt(0)').css('background','yellow'); //偶数行,且行数大于0(即标题)
$('tr:odd').css('background','olive'); //奇数行
});
</script>
</head>
<body>
<center>
<table>
<tr id="th">
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>张三</td>
<td>数学</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>数学</td>
<td>68</td>
</tr>
<tr>
<td>王五</td>
<td>英语</td>
<td>76</td>
</tr>
</table>
</center>
</body>
</html>
您可能感兴趣的文章:
相关文章
jquery滚动到顶部底部是一款简单的滚动到顶部底部控制。是一个很实用的功能，他能帮助新手和高级开发者们创造美好的用户体验。这里推荐给大家，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要介绍了jQuery实现的简单手风琴效果,结合实例形式分析了jQuery基于事件响应、页面元素属性动态操作实现手风琴效果的方法,需要的朋友可以参考下2018-08-08
下面简单介绍一下jQuery的一些特性和用法，对于学习jquery的朋友有不少帮助。2010-01-01
这篇文章主要介绍了JQuery控制图片由中心点逐渐放大效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
前些阵子写了个插件目的就是能够像.net 的 Requst.QuerySting["param"]那样获取地址栏参数。现在拿出来和大家分享。感觉这个插件还是蛮有用的。2010-10-10
现在大部分网站因为篇幅比较长，所以都会设置这么一个按钮，利用这个按钮可以实现从底部返回顶部的功能。下面通过实例代码给大家简单介绍一下吧2016-12-12
目前市面上很少见或几乎没有这数据(对象)选择插件.比如,点击input , select 元素时弹出div(窗口),载入数据让用户选择数据,选择后在填充回对应的元素.2012-08-08
这篇文章主要介绍了使用jQuery获取元素父节点的方法,通俗易懂,需要的朋友可以参考下。2016-06-06
这篇文章主要介绍了jQuery中ScrollTo用法,结合实例形式分析了jQuery中ScrollTo的功能、使用方法与相关操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jquery获取复选框被选中的值的方法,需要的朋友可以参考下2014-03-03
最新评论