通过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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
玩转方法:call和apply
May 08 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
vue使用自定义icon图标的方法
May 14 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
vue实现在线翻译功能
Sep 27 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 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
ADODB类使用
2006/11/25 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
js改变文章字体大小的实例代码
2013/11/27 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
js 调用百度分享功能
2017/02/27 Javascript
Angular2库初探
2017/03/01 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python实现UDP协议下的文件传输
2020/03/20 Python
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
大学生毕业自我鉴定
2013/11/06 职场文书
正规的求职信范文分享
2013/12/11 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
二年级数学教学反思
2014/01/21 职场文书
员工工作表现评语
2014/04/26 职场文书
设计师求职信
2014/07/01 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
2015年毕业生实习评语
2015/03/25 职场文书