Jquery 表格合并的问题分享


Posted in Javascript onSeptember 17, 2011

这里我使用Jquery库,这个就不用过多介绍了,有几个知识点:

- 选择器tr:eq(index),表示选择指定index索引的tr元素,index索引从0开始

- tempRow.parent(),表示返回tempRow对象的父节点对象

- $("<td/>").prependTo(),表示将一个td元素添加到指定元素的内容头部
实例代码
index.html

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="jquery.js" language="javascript" ></script> 
<style type="text/css"> 
<!-- 
body,td,th { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
} 
#gridview, #gridview td { border:1px #ccc solid; border-collapse:collapse; } 
--> 
</style> 
</head> 
<body> 
<table id="gridview" width="386" border="0" cellspacing="0" cellpadding="6"> 
<tr> 
<td width="59" align="center"><strong>课别</strong></td> 
<td width="76" align="center"><strong>班别</strong></td> 
<td width="73" align="center"><strong>班次</strong></td> 
<td width="130" align="center"><strong>出勤时间</strong></td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>一班制</td> 
<td>白班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>一班制</td> 
<td>夜班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>两班制</td> 
<td>白班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>两班制</td> 
<td>白班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>两班制</td> 
<td>夜班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>三班制</td> 
<td>早班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>三班制</td> 
<td>中班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>陈伟勋</td> 
<td>三班制</td> 
<td>晚班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>张文军</td> 
<td>一班制</td> 
<td>白班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>张文军</td> 
<td>两班制</td> 
<td>白班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>张文军</td> 
<td>两班制</td> 
<td>白班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>张文军</td> 
<td>两班制</td> 
<td>夜班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>张文军</td> 
<td>三班制</td> 
<td>夜班</td> 
<td>2011-09-09</td> 
</tr> 
<tr> 
<td>张文军</td> 
<td>三班制</td> 
<td>中班</td> 
<td>2011-09-09</td> 
</tr> 
</table> 
<script> 
var grid = $("#gridview"); 
var rowCount = grid.find("tr").length - 1; 
var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html(); 
var sp = 0; 
for(var i = rowCount; i >=0; i--) { 
var tempRow = grid.find("tr:eq("+i+")"); 
if(flagRow == tempRow.find("td:eq(0)").html()) { 
tempRow.find("td:eq(0)").remove(); 
} 
else { 
$("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+1)+")")); 
flagRow = tempRow.find("td:eq(0)").html(); 
sp = rowCount-i; 
if(i != 0) { 
tempRow.find("td:eq(0)").remove(); 
} 
} 
} 
</script> 
</body> 
</html>

注释掉Jquery代码的效果图

Jquery 表格合并的问题分享

运行Jquery代码的效果图

Jquery 表格合并的问题分享
小结

代码写得很粗糙,只是简单做个笔记,最近在忙着整理编写一些Jquery插件和discuz插件,Python和PyQt的相关文章都未来得及整理发布,唉,时间不够用啊,只能慢慢来了。Jquery是相当不错的说,内置Sizzle选择器后,那速度更是飞一般,貌似现在到1.6版本了,希望越做越好吧!

Javascript 相关文章推荐
XENON基于JSON变种
Jul 27 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 #Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 #Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 #Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 #Javascript
jquer之ajaxQueue简单实现代码
Sep 15 #Javascript
js substr、substring和slice使用说明小记
Sep 15 #Javascript
javascript 闭包
Sep 15 #Javascript
You might like
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
2010/08/01 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
简单的Python的curses库使用教程
2015/04/11 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python selenium firefox使用详解
2019/02/26 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python pandas 时间日期的处理实现
2019/07/30 Python
python join方法使用详解
2019/07/30 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
如何使用python切换hosts文件
2020/04/29 Python
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
十佳大学生村官事迹
2014/01/09 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
应聘会计求职信
2014/06/11 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
神秘岛读书笔记
2015/07/01 职场文书
Python pyecharts绘制条形图详解
2022/04/02 Python
我去timi了,一起去timi是什么意思?
2022/04/13 杂记