通过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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
js实现打字小游戏
Dec 17 Javascript
vue父子组件间引用之$parent、$children
May 20 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日期时间函数的高级应用技巧
2009/05/16 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python GUI计算器的实现
2020/10/09 Python
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
Herschel美国官网:背包、手提袋及配件
2020/03/10 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
电子信息工程专业自荐书
2014/06/24 职场文书
中学生打架检讨书
2014/10/13 职场文书
2015年教师节活动总结
2015/03/20 职场文书
爱国主义影片观后感
2015/06/18 职场文书
小学总务工作总结
2015/08/13 职场文书