作家
登录

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

作者: 来源:www.28hudong.com 2013-03-30 00:33:51 阅读 我要评论

需求   把含有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

  推荐阅读

  jqPlot 图表中文API使用文档及源码和在线示例

简介 jqplot是一款非常不错的基于jquery的图表插件,这篇文章主要帮助大家整理了jqplot的中文使用说明和在线示例及源码下载。jqplot插件在支持HTML5的浏览器上将会在canvas上呈现图表。 引入脚本文件 jqplot需要1.>>>详细阅读


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

地址:http://www.17bianji.com/kaifa2/JS/23653.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)