`
孔雀王子
  • 浏览: 42017 次
  • 性别: Icon_minigender_1
  • 来自: 河北
文章分类
社区版块
存档分类
最新评论

一个简单的JS实现表格隔行换色的实例

阅读更多

        JavaScript的强大我不用说了,这几天学习下来收获蛮多的,于是写了几个案例,对于初学者还是有用的。看代码:

       

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	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 'tablecolor.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">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript">

function icolor() {

	var itr = document.getElementById("itable").rows;

	for (i = 0; i < itr.length; i++) {

		(i % 2 == 0) ? (itr[i].style.background = "#FFFFFF")

		: (itr[i].style.background = "#99CCFF");

	}

	document.get

}
</script>
	</head>

	<body onload="icolor();">
		<table border="1" cellpadding="0" cellspacing="0" width="480"
			height="200" style="border-collapse: collapse" align="center"
			id="itable">
			<caption>

				<font size="5" color="red" face="华文行楷">学生信息</font>

			</caption>
			<tr>
				<th>
					编号
				</th>
				<th>
					姓名
				</th>
				<th>
					性别
				</th>
				<th>
					邮箱
				</th>
			</tr>
			<c:forEach begin="1" end="5" var="num">
				<tr>
					<td align="center">
						${num }
					</td>
					<td align="center">
						Tom${num }
					</td>
					<td align="center">
						男
					</td>
					<td align="center">
						sxpgog@sina.com
					</td>
				</tr>
			</c:forEach>
		</table>
	</body>
</html>

 

0
0
分享到:
评论

相关推荐

    jquery 隔行换色

    本教程将详细介绍如何使用`jQuery`实现隔行换色的特效,并通过两个实例帮助你理解和应用。 首先,我们需要理解基本的HTML结构,例如一个包含多行数据的表格。假设我们有以下HTML代码: ```html 数据1 数据2 ...

    实现表格隔行换色效果特效代码

    本教程将详细介绍如何实现表格隔行换色的代码实现。 首先,我们需要了解HTML表格的基本结构。在HTML中,`&lt;table&gt;`标签用于创建一个表格,`&lt;tr&gt;`表示表格行,`&lt;td&gt;`表示单元格。例如: ```html 数据1 数据2 ...

    使用JQ完成表格隔行换色的简单实例

    总的来说,通过jQuery实现表格隔行换色是前端开发中常见的一种优化手段。它利用了jQuery的选择器功能和CSS的类应用,使得代码更简洁,同时提高了可维护性。在实际项目中,可以根据需求选择直接使用JavaScript设置...

    jquery实现表格隔行换色效果

    本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 1、新建一个web项目,jQuery; 2、在WebContent目录下新建script文件夹,将jquery-1.10.1....

    javascript实现table表格隔行变色的方法

    在本篇文章中,我们将学习如何使用JavaScript来实现一个表格隔行变色的效果。具体来说,我们会了解到以下几个方面的知识点: 1. JavaScript基础语法:JavaScript的基本语法包括变量声明、函数定义、条件判断、循环...

    jquery实现表格多选,单击颜色加深,再点击颜色还原,隔行换色,源代码

    总结起来,通过熟练运用jQuery,我们可以轻松实现表格的多选、颜色变化和隔行换色效果,提升Web应用的用户体验。而这一切都离不开对jQuery核心API的深入理解和实践。希望这个实例能帮助您更好地理解如何使用jQuery来...

    jQuery实例教程,滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行换色、收缩展开效果、图片展示

    jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在本教程中,我们将深入探讨jQuery的一些核心功能和常见应用,如滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行...

    jquery隔行换色效果实现方法

    在网页设计中,为了提升用户体验,常常会使用到隔行换色的效果,使得表格内容更加清晰易读。本文将详细讲解如何使用jQuery实现这一功能。 首先,jQuery 是一个流行的 JavaScript 库,它提供了丰富的功能和简便的API...

    jQuery轻松实现表格的隔行变色和点击行变色的实例代码

    总结来说,本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色,而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本,可以极大地增强网页的功能和用户的交互...

    jQuery实现table表格鼠标经过隔行换颜色特效代码.zip

    "jQuery实现table表格鼠标经过隔行换颜色特效代码"是一个实用的例子,展示了如何利用jQuery为HTML表格添加交互性,使得用户在鼠标悬停在表格行上时,能动态改变行的背景色,提高用户体验。 首先,我们需要了解HTML...

    利用JavaScript的%做隔行换色的实例

    总结来说,利用JavaScript的模运算符 `%` 实现隔行换色是一种高效且灵活的方法。它允许开发者根据需求动态地改变列表项的样式,无需在HTML或CSS中硬编码颜色。这种方法对于处理动态生成的数据尤为有用,因为我们可以...

    JavaScript实现99乘法表及隔行变色实例代码

    通过这些知识点的详细解释,可以了解到JavaScript实现99乘法表及隔行变色实例代码不仅仅是简单的编程问题,它还涵盖了网页布局、事件处理、逻辑判断等多个方面的综合应用。掌握这些知识可以帮助读者更好地理解如何...

    jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

    总结起来,通过结合CSS和jQuery,我们可以实现表格的隔行变色以及高亮当前选择行的效果,提升用户在浏览表格数据时的视觉体验。这个方法不仅适用于这个特定的示例,也可以灵活应用到其他类似的表格美化场景中。

    纯js实现隔行变色效果

    本文实例为大家分享了js实现隔行变色的具体代码,供大家参考,具体内容如下 [removed] function createTable(){ //创建表格 var table = document.createElement(table); //设置表格的行数 for(var i=0;i&lt;4...

    很漂亮的支持隔行换色的标签切换TAb

    "很漂亮的支持隔行换色的标签切换Tab"是一个专为提升用户体验设计的网页组件,它结合了Ajax和JavaScript技术,实现了标签导航的功能,并且具有独特的视觉效果——隔行换色。这一特性不仅使用户界面更美观,还能帮助...

    javascript网页特效实例大全(13-19)

    实例326 表格隔行变色 521 13.3 鼠标及滚动条样式 522 实例327 显示自定义鼠标形状 522 实例328 动画光标 524 实例329 制作彩色滚动条 525 13.4 文字及列表样式 527 实例330 应用删除线样式标记商品...

Global site tag (gtag.js) - Google Analytics