1. javaScript实现隔行变色:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
.datalist tr.altrow{
background-color:#a5e5aa; //隔行变色
}
</style>
<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>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<td>isaac</td>
<td>isaac</td>
</tr>
</table>
</body>
</html>
2. Jquery实现隔行变色:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.min.js" />
<style type="text/css">
.datalist tr.altrow{
background-color:#a5e5aa; //隔行变色
}
</style>
<script type="text/javascript">
$(function() {
$("table.datalist tr:nth-child(odd)").addClass("altow");
});
</script>
</head>
<body>
<table class="datalist" summary="list of members in EE Studay" id="oTable">
<tr>
<td>isaac</td>
<td>isaac</td>
</tr>
</table>
</body>
</html>
分享到:
相关推荐
主要介绍了JS与jQuery实现隔行变色的方法,结合实例形式对比分析了javascript与jQuery实现隔行变色的具体操作步骤与相关技巧,体验一下jQuery的华丽与简洁,需要的朋友可以参考下
主要介绍了jQuery实现隔行变色的方法,结合实例形式对比原生JS实现隔行变色的相关技巧,给出了2种jQuery实现隔行变色的方法,需要的朋友可以参考下
本文实例讲述了jQuery实现简单隔行变色的方法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> &...
jQuery动态生成隔行变色的table,使用jQuery+css+json实现
1、JQuery选择器继承了CSS、path语音的部分语法,允许通过标签名、属性名、内容对DOM元素进行快速、准确... 使用JQuery实现隔行变色 </TITLE> <META NAME=”Generator” CONTENT=”EditPlus”> <META N
主要介绍了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码,涉及jQuery针对页面元素动态操作及响应鼠标事件动态修改页面元素样式的相关技巧,需要的朋友可以参考下
给大家分享了jQuery实现隔行背景色变色的代码,有相同需要的小伙伴参考下吧
主要介绍了jQuery实现的隔行变色功能,结合具体实例形式分析了jQuery事件响应、元素遍历及属性动态操作相关使用技巧,需要的朋友可以参考下
主要为大家详细介绍了实现jquery隔行变色效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例讲述了jQuery实现Table表格隔行变色及高亮显示当前选择行效果。分享给大家供大家参考,具体如下: 最近客户要求高亮选择列表的功能,于是顺便做了个,作为记录。 前台代码: <!DOCTYPE ...
下面小编就为大家带来一篇jQuery轻松实现表格的隔行变色和点击行变色的实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
用JQuery实现表格隔行变色和突出显示当前行的代码,需要的朋友可以参考下
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下
可编辑的表格,实现隔行换色等效果,使用jquery实现,有