通过jquery还原含有rowspan、colspan的table的实现方法


Posted in Javascript onFebruary 10, 2012

需求

把含有rowspan、colspan的table还原。

例如原table为:

通过jquery还原含有rowspan、colspan的table的实现方法

还原后的table为:

通过jquery还原含有rowspan、colspan的table的实现方法

代码原理

对table进行遍历,如果td的rowspan属性值大于1,则给当前的td的父元素的兄弟元素添加td,如果td的colspan属性值大于1,则在当前的td元素后添加td

//本文首发博客园:http://artwl.cnblogs.com(2012/02/08)jQuery.fn.RevertTable=function(){ 
$("tr",this).each(function(trindex,tritem){ 
$(tritem).find("td").each(function(tdindex,tditem){ 
var rowspanCount=$(tditem).attr("rowspan"); 
var colspanCount=$(tditem).attr("colspan"); 
var value=$(tditem).text(); 
var newtd="<td>"+value+"</td>"; 
if(rowspanCount>1){ 
var parent=$(tditem).parent("tr")[0]; 
while(rowspanCount-->1){ 
$(parent).next().prepend(newtd); 
parent=$(parent).next(); 
} 
$(tditem).attr("rowspan",1); 
} 
if(colspanCount>1){ 
while(colspanCount-->1){ 
$(tditem).after(newtd); 
} 
$(tditem).attr("colspan",1); 
} 
}); 
}); 
}

在线演示 http://demo.3water.com/js/2012/jquery_demo/jquery_rowspan_colspan_table.html
小结

本文只提供了还原含有rowspan、colspan的table的方案之一,欢迎大家测试讨论。

至于合并表格单元格网上已经有了代码:

原文标题:jQuery colspan and rowspan table using cell break

原文地址:http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html

Javascript 相关文章推荐
jquery插件开发方法(初学者)
Feb 03 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 #Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
Feb 10 #Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 #Javascript
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 #Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 #Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 #Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 #Javascript
You might like
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
javascript import css实例代码
2008/07/18 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
vue实现分页栏效果
2019/06/28 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
解决pyttsx3无法封装的问题
2018/12/24 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
python实现密码强度校验
2020/03/18 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
业务员岗位职责范本
2013/12/15 职场文书
销售行政专员职责
2014/01/03 职场文书
银行演讲稿范文
2014/01/03 职场文书
给校长的建议书300字
2014/05/16 职场文书
绿色出行口号
2014/06/18 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
js实现模拟购物商城案例
2021/05/18 Javascript
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript