通过jquery还原含有rowspan、colspan的table的实现方法
更新时间：2012年02月10日 19:33:46 作者：
通过jquery还原含有rowspan、colspan的table的实现方法，学习jquery的朋友可以参考下
需求
把含有rowspan、colspan的table还原。
例如原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.jb51.net/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
把含有rowspan、colspan的table还原。
例如原table为：
还原后的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.jb51.net/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
相关文章
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的2012-10-10
今天与大家分享一下我写的一个滚动条滚动固定div的例子，现在很多地方都可以看到这样的效果2012-10-10
这篇文章主要介绍了Jquery简单分页实现方法,实例分析了jquery分页的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
CamanJs库用于个人项目中进行使用的图形操作库，这个库是基于JavaScript的canvas操作库，接下来，通过本篇文章给大家详细介绍使用CamanJS在Web页面上处理图像的技巧，需要的朋友一起来学习下2015-08-08
这篇文章主要介绍了jQuery和CSS仿京东仿淘宝列表导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了一个jquery验证邮箱格式是否正确的实践案例，利用正则表达式进行验证，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery实现可展开折叠的导航效果,结合实例形式分析了基于jquery.easing.1.3.js插件的展开折叠效果实现技巧,非常简单实用,需要的朋友可以参考下2016-09-09
在使用jquery操作js时，经常弄不明白this与$(this)。最近不是很忙，抽空仔细研究了一下，记录下来以供在忘记的时候拉出来参考参考！2014-11-11
jquery $.ajax相关用法分享，使用jquery的朋友可以参考下2012-03-03
我想熟悉javascript的没有不知道jquery的吧，不得不提的就是特有的连缀书写语法了，jquery连缀语法如何实现，接下来将详细介绍2012-11-11
最新评论