通过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 相关文章推荐
xml 封装与解析(javascript和C#中)
Jul 26 Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
Javascript页面添加到收藏夹的简单方法
2013/08/07 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
javascript设计模式之工厂模式示例讲解
2014/03/04 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue初始化动画加载的实例
2018/09/01 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
基于Python实现通过微信搜索功能查看谁把你删除了
2016/01/27 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
中学教师师德师风演讲稿
2014/08/22 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
关于分班的感言
2015/08/04 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server