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>

相关文章

  • jquery滚动到顶部底部代码

    jquery滚动到顶部底部代码

    jquery滚动到顶部底部是一款简单的滚动到顶部底部控制。是一个很实用的功能,他能帮助新手和高级开发者们创造美好的用户体验。这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • jQuery实现的简单手风琴效果示例

    jQuery实现的简单手风琴效果示例

    这篇文章主要介绍了jQuery实现的简单手风琴效果,结合实例形式分析了jQuery基于事件响应、页面元素属性动态操作实现手风琴效果的方法,需要的朋友可以参考下
    2018-08-08
  • jQuery的一些特性和用法整理小结

    jQuery的一些特性和用法整理小结

    下面简单介绍一下jQuery的一些特性和用法,对于学习jquery的朋友有不少帮助。
    2010-01-01
  • JQuery控制图片由中心点逐渐放大效果

    JQuery控制图片由中心点逐渐放大效果

    这篇文章主要介绍了JQuery控制图片由中心点逐渐放大效果的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jQuery获取地址栏参数插件(模仿C#)

    jQuery获取地址栏参数插件(模仿C#)

    前些阵子写了个插件目的就是能够像.net 的 Requst.QuerySting["param"]那样获取地址栏参数。现在拿出来和大家分享。感觉这个插件还是蛮有用的。
    2010-10-10
  • 如何利用JQuery实现从底部回到顶部的功能

    如何利用JQuery实现从底部回到顶部的功能

    现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能。下面通过实例代码给大家简单介绍一下吧
    2016-12-12
  • Jquery 数据选择插件Pickerbox使用介绍

    Jquery 数据选择插件Pickerbox使用介绍

    目前市面上很少见或几乎没有这数据(对象)选择插件.比如,点击input , select 元素时弹出div(窗口),载入数据让用户选择数据,选择后在填充回对应的元素.
    2012-08-08
  • jQuery获取元素父节点的方法

    jQuery获取元素父节点的方法

    这篇文章主要介绍了使用jQuery获取元素父节点的方法,通俗易懂,需要的朋友可以参考下。
    2016-06-06
  • jQuery中ScrollTo用法示例

    jQuery中ScrollTo用法示例

    这篇文章主要介绍了jQuery中ScrollTo用法,结合实例形式分析了jQuery中ScrollTo的功能、使用方法与相关操作技巧,需要的朋友可以参考下
    2016-09-09
  • jquery获取复选框被选中的值

    jquery获取复选框被选中的值

    这篇文章主要介绍了jquery获取复选框被选中的值的方法,需要的朋友可以参考下
    2014-03-03

最新评论