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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
layui实现数据表格自定义数据项
Oct 26 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
php使用curl存储cookie的示例
2014/03/31 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php微信公众平台开发类实例
2015/04/01 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
Python发送Email方法实例
2014/08/21 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python爬取m3u8连接的视频
2018/02/28 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
python烟花效果的代码实例
2020/02/25 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
银行自荐信范文
2013/10/07 职场文书
关于旷工的检讨书
2014/02/02 职场文书
教师现实表现材料
2014/02/14 职场文书
超市促销活动方案
2014/03/05 职场文书
大学生工作求职信
2014/06/23 职场文书
个人总结与自我评价
2014/09/18 职场文书
2014年学校工作总结
2014/11/20 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
初中班主任工作随笔
2015/08/15 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript