通过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 相关文章推荐
深入领悟JavaScript中的面向对象
Nov 18 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
20个必会的JavaScript面试题(小结)
Jul 02 Javascript
小程序实现tab标签页
Nov 16 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操作符与控制结构代码
2011/12/30 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
Joomla语言翻译类Jtext用法分析
2016/05/05 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
js比较和逻辑运算符的介绍
2013/03/10 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
css3中新增的样式使用示例附效果图
2014/08/19 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
Linux的主要特性
2016/09/03 面试题
秋季婚礼证婚词
2014/01/11 职场文书
小露珠教学反思
2014/04/30 职场文书
拓展策划方案
2014/06/03 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
上班迟到检讨书
2014/09/15 职场文书
成绩报告单家长评语
2014/12/30 职场文书
2015年班组长工作总结
2015/04/10 职场文书
初中政治教学反思
2016/02/23 职场文书