jquery 双色表格实现代码
作者:bea
http:///article/21027.htm不多说了,直接给代码 代码 代码如下: <html> <head> <title>双色表格</title> <style type="text/css"> <!-- table { border:solid 1px black; text-align:center; border-spacing:0px; } th,td { bord
http:///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>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
- jMessageBox 基于jQuery的窗口插件
- jQuery 开天辟地入门篇一
- javascript 返回数组中不重复的元素
- jquery tablesorter.js 支持中文表格排序改进
- javascript tabIndex属性
- javascript 支持页码格式的分页类
- jquery 事件执行检测代码
- jQuery Selectors(选择器)的使用(七、子元素篇)
- 为指定元素增加样式的js代码
- 动态调整textarea中字体的大小代码
- 可以用来搜索当前页面内容的js代码
- javascript弹出窗口 window.open使用方法以及参数说明分析篇
- javascript setTimeout和setInterval 的区别
- javascript OFFICE控件测试代码
- JavaScript Cookie 直接浏览网站分网址
- JavaScript Cookie显示用户上次访问的时间和次数
- JavaScript 利用Cookie记录用户登录信息
- JavaScript Cookie的读取和写入函数