通过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的图片懒加载js
Jun 30 Javascript
jquery配合css简单实现返回顶部效果
Sep 30 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
vue.js的简单自动求和计算实例
Nov 08 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
php zip文件解压类代码
2009/12/02 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
js 函数调用模式小结
2011/12/26 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python调用自定义函数的实例操作
2019/06/26 Python
pandas中的series数据类型详解
2019/07/06 Python
python SVD压缩图像的实现代码
2019/11/05 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
关于Java String的一道面试题
2013/09/29 面试题
某公司的.net工程师面试题笔试题
2013/11/22 面试题
高中生自我评语大全
2014/01/19 职场文书
委托书范文
2014/04/02 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
庆六一活动总结
2014/08/29 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
大学生求职自荐信
2015/03/24 职场文书
农村婚庆主持词
2015/06/29 职场文书