<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'Jquery003.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.6.1.js"></script>
<!-- 用javascript实现隔行换色
<script type="text/javascript">
window.onload = function(){
var trs = document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor = "red";
}else{
trs[i].style.backgroundColor = "blue";
}
}
}
</script>
-->
<!-- 用Jquery实现隔行换色 -->
<script type="text/javascript">
$(document).ready(function() {
$("#table1 tr:even").css("background", "#ECF5FF");
$("#table1 tr:odd").css("background", "#D8D8EB");
});
</script>
</head>
<body>
<table id="table1" border="1" cellpadding="0px" cellspacing="0px"
width="700px" style="line-height: 30px;">
<tbody>
<tr>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
<td>aaaaaa</td>
</tr>
<tr>
<td>bbbbbb</td>
<td>bbbbbb</td>
<td>bbbbbb</td>
<td>bbbbbb</td>
</tr>
<tr>
<td>cccccc</td>
<td>cccccc</td>
<td>cccccc</td>
<td>cccccc</td>
</tr>
<tr>
<td>dddddd</td>
<td>dddddd</td>
<td>dddddd</td>
<td>dddddd</td>
</tr>
<tr>
<td>eeeeee</td>
<td>eeeeee</td>
<td>eeeeee</td>
<td>eeeeee</td>
</tr>
<tr>
<td>ffffff</td>
<td>ffffff</td>
<td>ffffff</td>
<td>ffffff</td>
</tr>
</tbody>
</table>
</body>
</html>
分享到:
相关推荐
jquery 实现隔行换色 不错sd sf sdf sdf
Jquery实现隔行换色特效代码是一款简单的表格隔行换色特效。
jquery实现隔行换色效果
一天搞定jQuery(二)——使用jQuery表格的隔行换色
Jquery实现隔行换色特效代码是一款简单的表格隔行换色特效。
jquery实现表格隔行换色和鼠标经过提示效果源码
可编辑的表格,实现隔行换色等效果,使用jquery实现,有
给大家分享了jQuery实现隔行背景色变色的代码,有相同需要的小伙伴参考下吧
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能,感兴趣的朋友可以参考下
使用 jquery 来实现隔行换行的效果,简单得就跟吃饭一样。来吧,看看代码到底有多么的简单 代码如下:<html> <head> <meta http-equiv=”content-type” content=”text/html;charset=utf-8″ /> ...
主要介绍了jQuery实现隔行变色的方法,结合实例形式对比原生JS实现隔行变色的相关技巧,给出了2种jQuery实现隔行变色的方法,需要的朋友可以参考下
主要介绍了JS与jQuery实现隔行变色的方法,结合实例形式对比分析了javascript与jQuery实现隔行变色的具体操作步骤与相关技巧,体验一下jQuery的华丽与简洁,需要的朋友可以参考下
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>隔行换色</title> [removed][removed] ...
jquery实现表格多选,单击颜色加深,再点击颜色还原,隔行换色,自己写的插件
主要为大家详细介绍了jQuery实现表格隔行换色,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本篇文章主要介绍了使用简洁的jQuery方法实现隔行换色功能。需要的朋友可以过来参考下,希望对大家有所帮助
主要介绍jQuery实现table隔行换色和鼠标经过变色的两种方法,需要的朋友可以参考下
前端小白入门案例使用Hbuilder国产开发工具引用jQuery库实现表格隔行换色基本功能。简化DOM操作 代码的功能如下: 1.通过选择器获取表格的表头对象(thead tr),并设置其背景颜色为navajowhite。 2.通过选择器获取...