<%@ 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来实现隔行换色，并分享相关的技巧和注意事项。 首先，我们需要理解基本的HTML结构，通常包含一个`<table>`元素，里面嵌套着`<tr>`（表格行）和`<td>`（表格单元格）元素。隔行换色的...
jquery实现隔行换色效果
以上就是使用jQuery实现表格隔行换色特效的基本方法。这种方法可以提高表格的可读性，使用户更容易区分不同的行。当然，实际应用中可能需要根据具体的页面设计调整颜色方案和细节处理，例如添加过渡效果等。 在给定...
在本教程中，我们将深入探讨如何使用jQuery实现表格的隔行换色效果，这是一项常见的网页美化技术，可以使用户在浏览数据时有更好的视觉体验。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化DOM操作，让...
本教程将详细介绍如何使用`jQuery`实现隔行换色的特效，并通过两个实例帮助你理解和应用。 首先，我们需要理解基本的HTML结构，例如一个包含多行数据的表格。假设我们有以下HTML代码： ```html 数据1 数据2 ...
1. CSS基础：在不使用jQuery的情况下，我们通常会通过CSS的`:nth-child()`选择器来实现隔行换色。例如，给偶数行添加背景色： ```css tr:nth-child(even) { background-color: #f2f2f2; } ``` 2. jQuery实现：...
本文将详细介绍如何使用jQuery实现隔行换色以及结合点击事件选中复选框的功能。 首先，我们需要理解jQuery的基本用法。jQuery通过$函数初始化，可以快速选择DOM元素，并执行一系列操作。例如，选择所有的`<tr>`元素...
在使用jQuery实现隔行换色时，应确保jQuery库已经被正确引入，且页面的CSS样式定义无误。在实际开发中，如果表格数据是动态加载的（例如通过AJAX请求获取），则需要在数据加载到表格之后执行同样的jQuery脚本来添加...
本篇将详细介绍如何使用jQuery实现表格隔行换色以及鼠标经过时显示提示效果。 首先，我们需要理解jQuery的基本用法。jQuery通过选择器（如`$("#id")`、`$(".class")`或`$("tag")`）找到页面中的元素，然后对这些...
`jQuery`是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理以及动画效果的创建，因此使用`jQuery`来实现隔行换色特效是一种常见且高效的方法。 首先，我们需要了解`jQuery`的基本用法。`jQuery`的核心是...
标题和描述中提到的知识点主要集中在如何使用jQuery来实现表格的动态样式变化功能，包括隔行换色、移动换色以及点击换色。首先，我们将介绍这些效果的实现原理和技术细节。 ### 1. jQuery基础知识 jQuery是一个快速...
在压缩包中的"jquery隔行换色和鼠标经过样式"文件，可能包含了一个或多个示例文件，如HTML、CSS和JavaScript，展示了如何使用jQuery实现这些效果。文件名没有提及标题提示效果，但实现这个效果的方法与前两者类似，...
在IT领域，网页开发是不可或缺的一部分，而"codeAjax选项卡、隔行换色、弹出层"这三个概念都是网页动态交互设计中的重要元素。让我们分别深入探讨它们的原理和应用。 首先，codeAjax选项卡是一种常见的用户界面设计...
"可编辑的表格，实现隔行换色等效果"是一个典型的功能实现，通常用于数据展示，使表格更加易读，提升视觉效果。这个功能的实现通常涉及到HTML、CSS和JavaScript技术，特别是jQuery库的运用。 首先，HTML是网页的...
在网页中，我们经常需要对数据进行各种各样的处理，比如在表格或者列表中实现隔行换色，以增强用户的阅读体验。这个主题“JavaScript隔行换色”就是关于如何使用JavaScript来实现这个功能的。 隔行换色通常应用于...
在本例中，我们将利用jQuery选择器和类操作方法来实现隔行换色效果。 1. **jQuery 选择器**： - `#stu` 用于选取id为"stu"的表格元素，这是一个HTML表格（`<table>`）。 - `tr:even` 和 `tr:odd` 是伪类选择器，...
3. **jQuery 实现隔行变色** 如果HTML结构没有预设的隔行变色，可以使用jQuery动态添加CSS类。首先，确保页面已经引入jQuery库。然后，编写以下jQuery代码： ```javascript $(document).ready(function() { $('....
下面我们将详细探讨如何实现“超简单表格隔行换色+鼠标经过变色”这一功能，并兼容IE6、IE7以及Firefox。 首先，让我们从隔行换色开始。这是一种常见的CSS技巧，可以通过使用CSS伪类`:nth-child()`来实现。这个选择...
今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下： 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset=”utf-8″> <title>隔行换色</title> [removed][removed] ...
下面我们将详细讲解如何利用CSS和JS来实现隔行换色。 首先，我们从CSS开始。CSS是网页样式的核心，它允许我们定义元素的外观和布局。要实现隔行换色，我们可以使用`nth-child`伪类选择器。这个选择器允许我们选择...