欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

通过jquery还原含有rowspan、colspan的table的实现方法

时间:2021-09-19 07:53:06|栏目:jquery|点击:
需求
  把含有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

上一篇:jQuery包裹节点用法完整示例

栏    目:jquery

下一篇:jquery attr()设置和获取属性值实例教程

本文标题:通过jquery还原含有rowspan、colspan的table的实现方法

本文地址:http://www.codeinn.net/misctech/176039.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有