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>
分享到:
相关推荐
本教程将详细介绍如何使用`jQuery`实现隔行换色的特效,并通过两个实例帮助你理解和应用。 首先,我们需要理解基本的HTML结构,例如一个包含多行数据的表格。假设我们有以下HTML代码: ```html 数据1 数据2 ...
本教程将详细介绍如何实现表格隔行换色的代码实现。 首先,我们需要了解HTML表格的基本结构。在HTML中,`<table>`标签用于创建一个表格,`<tr>`表示表格行,`<td>`表示单元格。例如: ```html 数据1 数据2 ...
总的来说,通过jQuery实现表格隔行换色是前端开发中常见的一种优化手段。它利用了jQuery的选择器功能和CSS的类应用,使得代码更简洁,同时提高了可维护性。在实际项目中,可以根据需求选择直接使用JavaScript设置...
本文实例讲述了jquery实现表格隔行换色效果的代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: 1、新建一个web项目,jQuery; 2、在WebContent目录下新建script文件夹,将jquery-1.10.1....
在本篇文章中,我们将学习如何使用JavaScript来实现一个表格隔行变色的效果。具体来说,我们会了解到以下几个方面的知识点: 1. JavaScript基础语法:JavaScript的基本语法包括变量声明、函数定义、条件判断、循环...
总结起来,通过熟练运用jQuery,我们可以轻松实现表格的多选、颜色变化和隔行换色效果,提升Web应用的用户体验。而这一切都离不开对jQuery核心API的深入理解和实践。希望这个实例能帮助您更好地理解如何使用jQuery来...
jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在本教程中,我们将深入探讨jQuery的一些核心功能和常见应用,如滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行...
在网页设计中,为了提升用户体验,常常会使用到隔行换色的效果,使得表格内容更加清晰易读。本文将详细讲解如何使用jQuery实现这一功能。 首先,jQuery 是一个流行的 JavaScript 库,它提供了丰富的功能和简便的API...
总结来说,本文提供的实例代码不仅清晰地演示了如何用jQuery实现表格的隔行变色和点击行变色,而且强调了jQuery在网页交互设计中的实用性和有效性。通过编写简单的jQuery脚本,可以极大地增强网页的功能和用户的交互...
"jQuery实现table表格鼠标经过隔行换颜色特效代码"是一个实用的例子,展示了如何利用jQuery为HTML表格添加交互性,使得用户在鼠标悬停在表格行上时,能动态改变行的背景色,提高用户体验。 首先,我们需要了解HTML...
总结来说,利用JavaScript的模运算符 `%` 实现隔行换色是一种高效且灵活的方法。它允许开发者根据需求动态地改变列表项的样式,无需在HTML或CSS中硬编码颜色。这种方法对于处理动态生成的数据尤为有用,因为我们可以...
通过这些知识点的详细解释,可以了解到JavaScript实现99乘法表及隔行变色实例代码不仅仅是简单的编程问题,它还涵盖了网页布局、事件处理、逻辑判断等多个方面的综合应用。掌握这些知识可以帮助读者更好地理解如何...
总结起来,通过结合CSS和jQuery,我们可以实现表格的隔行变色以及高亮当前选择行的效果,提升用户在浏览表格数据时的视觉体验。这个方法不仅适用于这个特定的示例,也可以灵活应用到其他类似的表格美化场景中。
本文实例为大家分享了js实现隔行变色的具体代码,供大家参考,具体内容如下 [removed] function createTable(){ //创建表格 var table = document.createElement(table); //设置表格的行数 for(var i=0;i<4...
"很漂亮的支持隔行换色的标签切换Tab"是一个专为提升用户体验设计的网页组件,它结合了Ajax和JavaScript技术,实现了标签导航的功能,并且具有独特的视觉效果——隔行换色。这一特性不仅使用户界面更美观,还能帮助...
实例326 表格隔行变色 521 13.3 鼠标及滚动条样式 522 实例327 显示自定义鼠标形状 522 实例328 动画光标 524 实例329 制作彩色滚动条 525 13.4 文字及列表样式 527 实例330 应用删除线样式标记商品...