通过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 radio 操作代码
Mar 16 Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
Three.js利用顶点绘制立方体的方法详解
Sep 27 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
python如何把嵌套列表转变成普通列表
2018/03/20 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Python动态强类型解释型语言原理解析
2020/03/25 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
一道输出判断型Java面试题
2014/10/01 面试题
网络技术专业推荐信
2014/02/20 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
中专生自荐信
2014/06/25 职场文书
小学教学工作总结2015
2015/05/13 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js