通过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中需要注意的细节问题小结
Dec 06 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
js Object2String方便查看js对象内容
Nov 24 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
原生js实现选项卡功能
Mar 08 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 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
深入apache host的配置详解
2013/06/09 PHP
php获取文件大小的方法
2014/02/26 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
JavaScript调试技巧之console.log()详解
2014/03/19 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python实现翻转数组功能示例
2018/01/12 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
python编写计算器功能
2019/10/25 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
python打包生成so文件的实现
2020/10/30 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
用CSS3来实现社交分享按钮
2014/11/11 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
数字漫画:comiXology
2020/06/13 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
办理护照介绍信
2014/01/16 职场文书
银行类自荐信
2014/02/04 职场文书
爱心捐书活动总结
2014/07/05 职场文书
贷款担保书
2015/01/20 职场文书
小学语文教师研修日志
2015/11/13 职场文书
导游词之临安白水涧
2019/11/05 职场文书
python 逐步回归算法
2021/04/06 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL