通过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 formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
用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
构建简单的Webmail系统
2006/10/09 PHP
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
2014年最新推荐的10款 PHP 开发框架
2014/08/01 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
2017/01/04 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
十个Python练手的实战项目,学会这些Python就基本没问题了(推荐)
2019/04/26 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python实现简单猜单词游戏
2020/12/24 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
经验交流材料格式
2014/12/30 职场文书
公司清洁工岗位职责
2015/04/15 职场文书
2015双创工作总结
2015/07/24 职场文书
《假如》教学反思
2016/02/17 职场文书