通过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
相关文章
当用户需要某项功能时要填写一些表单信息，在填写完成并提交后，该部分信息是不允许再次修改的。表单包含TextBox、DropDownList、CheckBox等控件。2010-04-04
大家在qq聊天或者是玩微信时发表自己的心情，都会允许加入表情，大家知道qq表情是怎么实现的吗，接下来，通过本篇文章给大家实例讲解基于jQuery实现的QQ表情插件，需要的朋友可以参考下2015-08-08
下面小编就为大家带来一篇jquery获取所有选中的checkbox实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了jquery绑定事件 bind和on的用法与区别,结合实例形式分析了jquery绑定事件 bind和on的基本功能、用法、区别与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了jQuery简单获取键盘事件的方法,涉及jQuery针对键盘事件的获取与响应技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jQuery实现弹出窗口弹出div层的实例代码,点击页面的链接，弹出一个div层，同时页面的其他部分变灰并且不能点击,，具体实现代码大家参考下本文吧2017-01-01
这篇文章主要介绍了jquery自定义插件开发之window的实现过程的相关资料,需要的朋友可以参考下2016-05-05
WEB前端开发都应知道的jquery小技巧及jquery三个简写
一个简单技巧的集合，帮你提升 jQuery 技能，下面脚本之家小编给大家收集整理了web前端开发都应知道的jquery小技巧，对jquery小技巧感兴趣的朋友一起学习吧2015-11-11
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
在ipad、iphone网页开发中，我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法2014-05-05
这篇文章主要内容是JQuery实现可编辑的表格实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-09-09
最新评论