通过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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
JavaScript实现窗口抖动效果
Oct 19 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
在react中使用vue的状态管理的方法示例
May 02 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
MVC模式的PHP实现
2006/10/09 PHP
比较好用的PHP防注入漏洞过滤函数代码
2012/04/11 PHP
smarty模板判断数组为空的方法
2015/06/10 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python 迭代器工具包【推荐】
2016/05/06 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
pytorch 常用线性函数详解
2020/01/15 Python
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
ORACLE十问
2015/04/20 面试题
会计岗位职责
2013/11/08 职场文书
文体活动实施方案
2014/03/27 职场文书
护士求职信
2014/07/05 职场文书
承诺书模板
2014/08/30 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
承租经营合作者协议书
2014/10/01 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
幼师大班个人总结
2015/02/13 职场文书
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
JS实现九宫格拼图游戏
2022/06/28 Javascript
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android