<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实现表格隔行变色</title>
</head>
<style type="text/css" media="all">
.datalist{
border:1px #000000 solid;
font-family:"宋体";
border-collapse:collapse;
background-color:#999999;
font-size:14px;
}
.datalist tr.altrow{
background-color:#003399;
}
</style>
<script language="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>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<th>传说中的文字111 </th>
<th>传说中的文字222 </th>
<th>传说中的文字333 </th>
</tr>
<tr><!--奇数行-->
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
<tr>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
<td>传说中的文字 </td>
</tr>
</table>
</body>
</html>
使用 jquery后 把原来的javascript代码替换为下面的:、
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});
</script>
分享到:
相关推荐
jquery table鼠标滑过隔行变色表格样式代码
表格隔行变色 表格变色 表格单元格标色,实现方式是奇偶数隔行变色,点击变色!
表格颜色自动隔行变色
实现表格的隔行变色
比较实用的隔行变色的table,带js和复选框,全选反选
CSS+JS 实现表格隔行变色 鼠标移动变色
时间表格的隔行变色,以及鼠标移动到某行 高亮的效果
js表格特效制作js表格变色效果,表格隔行变色,鼠标滑过显示单行变色效果,点击选中变色。内含js代码下载
主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
表格隔行变色,jquerys
jquery表格隔行变色鼠标滑过竖直表格内容变色效果
本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
03-表格隔行变色.html
NULL 博文链接:https://cwl123456.iteye.com/blog/1997909
2、表格的隔行变色.html
表格 隔行变色 基于JS 简单表格 颜色可以自行替换 很简单
”800″ border u201d0″ cellpadding=”0″ cellspacing> 不变色 ”goaler”> <td>xxxxxxxx <td>xxxxxxxx <td>xxxxxxxx <td>xxxxxxxx </tbod