通过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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
javascript 写类方式之十
Jul 05 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
js实现飞机大战游戏
Aug 26 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
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
python简单获取数组元素个数的方法
2015/07/13 Python
简单解析Django框架中的表单验证
2015/07/17 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
单链表反转python实现代码示例
2018/02/08 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python中正则表达式的用法总结
2019/02/22 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python定位xpath 节点位置的方法
2019/08/27 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
django教程如何自学
2020/07/31 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
端午节粽子促销活动方案
2014/02/02 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript