jQuery 对表格的简单操作

最新推荐文章于 2021-01-08 12:31:37 发布
最新推荐文章于 2021-01-08 12:31:37 发布
阅读量628 收藏 2
点赞数
分类专栏： jQuery 文章标签： jquery function html string 出版 path
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aimartt/article/details/7885398
版权

jQuery 对表格的简单操作

参考资料：
《锋利的jQuery》    作者： 单东林 张晓菲 魏然    出版社: 人民邮电出版社
页面初始化后效果如图：（请无视颜色的搭配睡觉）
 页面初始化

代码如下：
 
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			//页面初始化
			$(function() {
				//数据隔行变色效果
				$("tbody > tr:odd").addClass("odd").next().addClass("even");
				
				//初始化时第一行高亮
				$("tbody > tr:eq(1)").addClass("data");
				
				var preIndex = 0;	//记录前一次触发 click 事件的 <tr> 的索引
				//为数据区的 <tr> 绑定 click 事件 
				$("tbody > tr:gt(0)").click(function() {
					var currIndex = $("tbody > tr:gt(0)").index($(this));	//当前触发 click 事件的 <tr> 的索引
					beginIndex = preIndex;		//设置起点索引
					endIndex = currIndex;		//设置终点索引
					millisec = 300 / Math.abs(endIndex - beginIndex);		//设置总执行时间为 300 毫秒
					changeTr();	//高亮效果从起点索引移动至终点索引
					preIndex = currIndex;	//为下一次 click 事件记录 preIndex
				});				
			});	
			
			var millisec;		//高亮效果移动的时间间歇（毫秒）
			var beginIndex;		//高亮效果的起点索引
			var endIndex;		//高亮效果的终点索引
			var timeId;	//延迟执行的 setTimeout() 的 Id
			
			//高亮效果从起点索引移动至终点索引
			function changeTr(){
				if (beginIndex < endIndex) {
					//高亮效果移至下一行
					$("tbody > tr:gt(0):eq(" + (++beginIndex) + ")")
						.addClass("data").siblings().removeClass("data");
					timeId = setTimeout("changeTr()", millisec);
				} else if (beginIndex > endIndex) {
					//高亮效果移至上一行
					$("tbody > tr:gt(0):eq(" + (--beginIndex)+ ")")
						.addClass("data").siblings().removeClass("data");
					timeId = setTimeout("changeTr()", millisec);
				} else {
					//当高亮效果移至终点索引时，取消延迟执行
					clearTimeout(timeId);	
				}
			}
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			.odd {background: #b17af5;}		/* 奇数行背景色 */
			.even {background: #06cf4a;}	/* 偶数行背景色 */
			.data {background: #812671;}	/* 高亮行背景色 */
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<table width="500px">
  			<thead>
  				<tr>
  					<td width="200px">姓名</td>
  					<td width="100px">性别</td>
  					<td width="200px">地址</td>
  				</tr>
  			</thead>
  			<tbody>
  				<tr><td colspan="3"><hr /></td></tr>
  				<tr>
  					<td>张三</td>
  					<td>男</td>
  					<td>列支敦士登</td>
  				</tr>
  				<tr>
  					<td>李四</td>
  					<td>男</td>
  					<td>米兰</td>
  				</tr>
  				<tr>
  					<td>王老五</td>
  					<td>女</td>
  					<td>布雷西亚</td>
  				</tr>
  				<tr>
  					<td>郑贵妃</td>
  					<td>女</td>
  					<td>皮亚琴察</td>
  				</tr>
  				<tr>
  					<td>赫伯特·冯·卡拉扬</td>
  					<td>男</td>
  					<td>三汊镇</td>
  				</tr>
  				<tr>
  					<td>迈赫迪·查姆兰</td>
  					<td>男</td>
  					<td>土坝孜街道</td>
  				</tr>
  				<tr>
  					<td>张三</td>
  					<td>男</td>
  					<td>列支敦士登</td>
  				</tr>
  				<tr>
  					<td>李四</td>
  					<td>男</td>
  					<td>米兰</td>
  				</tr>
  				<tr>
  					<td>王老五</td>
  					<td>女</td>
  					<td>布雷西亚</td>
  				</tr>
  				<tr>
  					<td>郑贵妃</td>
  					<td>女</td>
  					<td>皮亚琴察</td>
  				</tr>
  				<tr>
  					<td>赫伯特·冯·卡拉扬</td>
  					<td>男</td>
  					<td>三汊镇</td>
  				</tr>
  				<tr>
  					<td>迈赫迪·查姆兰</td>
  					<td>男</td>
  					<td>土坝孜街道</td>
  				</tr>
  				<tr>
  					<td>张三</td>
  					<td>男</td>
  					<td>列支敦士登</td>
  				</tr>
  				<tr>
  					<td>李四</td>
  					<td>男</td>
  					<td>米兰</td>
  				</tr>
  				<tr>
  					<td>王老五</td>
  					<td>女</td>
  					<td>布雷西亚</td>
  				</tr>
  				<tr>
  					<td>郑贵妃</td>
  					<td>女</td>
  					<td>皮亚琴察</td>
  				</tr>
  				<tr>
  					<td>赫伯特·冯·卡拉扬</td>
  					<td>男</td>
  					<td>三汊镇</td>
  				</tr>
  				<tr>
  					<td>迈赫迪·查姆兰</td>
  					<td>男</td>
  					<td>土坝孜街道</td>
  				</tr>
  			</tbody>
  		</table>
  	</body>
</html>
aimartt
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery操作表格
wyqwilliam的博客
12-15 421
<html> <head> <title>jQuery操作表格</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> tr{ height: 40px; } </style&g...
jQuery对表格的操作
ChibiMarukoChan的博客
06-25 1749
表格变色 1.普通的隔行变色 HTML代码： <table> <thead> <tr><th>姓名</th><th>性别</th><th>居住地</th></tr> </thead> <...
jquery 操作表格
04-05
NULL 博文链接：https://kingschan.iteye.com/blog/1513128
JavaScript实现表格中的复选框全选与反全选
二木成林
10-18 383
效果展示 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr> &...
使用jQuery操作表格
qq_45593083的博客
11-24 225
控制表格颜色显示 隔行换色 $(“tr:odd”).addClass(“odd”)为基数行添加样式 $(“tr:even”).addClass(“even”) 为偶数行添加样式 二者的索引都是从零开始的，因此第一行是偶数行 <style type="text/css"> .odd{ background:red ; } .even{ b...
jquery 操作动态表格(原)
03-20
NULL 博文链接：https://jsufly.iteye.com/blog/758925
jQuery操作表格（table）的常用方法、技巧汇总
12-09
以下列出13个jQuery操作table常用到的功能： 1.鼠标移动行变色 代码如下:$(‘#table1 tr’).hover(function(){    $(this).children(‘td’).addClass(‘hover’)}, function(){    $(this).children(‘td’).removeClass(‘hover’)});方法二： 代码如下:$(“#table1 tr:gt(0)”).hover(function() {     $(this).children(“td”).addClass(“hover”); }, function() {    
超级简单的jquery操作表格方法
10-25
主要介绍了超级简单的jquery操作表格方法,可实现针对表格行与列的增加及删除操作,是非常实用的技巧,需要的朋友可以参考下
jquery操作table表格
山鹰的专栏
05-25 458
一、数据准备 &lt;table id="table1"&gt; &lt;tr&gt;&lt;th&gt;文章标题&lt;/th&gt;&lt;th&gt;文章分类&lt;/th&gt;&lt;th&gt;发布时间&lt;/th&gt;&lt;th&gt;操作&lt;/th&gt;&lt;/tr&gt;
Jquery操作表格(清空表头以外的数据后进行追加)
风泊月
03-24 1326
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="A
JQuery 对表格的详细操作
tempsitegoogle
07-09 57
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&
【Jquery】Jquery操作table表格详细说明
liuzhenhe1988的专栏
01-08 1720
函数说明 //eq:获取子元素索引从 0 开始 $("#tableid tr th:eq(1)").remove();//第二列 //nth-child:获取子元素从 1 开始 $("#tableid tr td:nth-child(2)").remove();//第二列 行操作 1、隐藏行 $("#tableid tbody tr:eq(3)").hide(); //隐藏第四行，行索引从0开始 //隐藏第二行的方式 $("#tableid tr:gt(0):eq(1)").hide();//
使用jQuery操作表单和表格
qq_45683767的博客
11-20 222
使用jQuery操作表单元素 1.1、操作文本框 1、获取文本框的值(两种方法)： var textCon = $("#id").val(); var textCon = $("#id").attr("value"); 2、设置文本框的值，可以使用attr()方法： $("#id").attr("value","要设定的值"); 3、设置文本框不可编辑的方法： $("#id").attr...
jQuery操作表格背景色迭代和鼠标移动事件（CSS中使用expression)
学习笔记
12-01 1468
表格的操作： 1：通过树形迭代，获取要操作的表格节点，jQuery实现动态的table背景色迭代，和鼠标移动时间，js实现(使用于一层表格，js方法参数为表格id，颜色自定义)： 表格css代码： #userinfoshow tr th{background: #B15BFF; text-align:center;vertical-align:middle;}//表头背景色和上下左右居中
jQuery应用：Ajax与表格操作详解
"jQuery 的Ajax应用 操作表格 插件" jQuery是一个非常强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本资源中，我们将深入探讨如何利用jQuery进行表格操作，特别是结合Ajax实现动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值