通过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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
浅析javascript的return语句
Dec 15 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
Vue异步组件使用详解
Apr 08 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
JS中的变量作用域(console版)
Jul 18 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 array_push 数组函数
2009/12/26 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
js中的事件捕捉模型与冒泡模型实例分析
2015/01/10 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Python二分法搜索算法实例分析
2015/05/11 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python中eval与int的区别浅析
2019/08/11 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Python如何实现自带HTTP文件传输服务
2020/07/08 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
公司道歉信范文
2014/01/09 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
商务助理求职信范文
2014/04/20 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
好好学习保证书
2015/02/26 职场文书
征求意见函
2015/06/05 职场文书
老人院义工活动感想
2015/08/07 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python