通過(guò)jquery還原含有rowspan、colspan的table的實(shí)現(xiàn)方法
更新時(shí)間：2012年02月10日 19:33:46 作者：
通過(guò)jquery還原含有rowspan、colspan的table的實(shí)現(xiàn)方法，學(xué)習(xí)jquery的朋友可以參考下
需求
把含有rowspan、colspan的table還原。
例如原table為：
對(duì)table進(jìn)行遍歷，如果td的rowspan屬性值大于1，則給當(dāng)前的td的父元素的兄弟元素添加td，如果td的colspan屬性值大于1，則在當(dāng)前的td元素后添加td
//本文首發(fā)博客園: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
小結(jié)
本文只提供了還原含有rowspan、colspan的table的方案之一，歡迎大家測(cè)試討論。
至于合并表格單元格網(wǎng)上已經(jīng)有了代碼：
原文標(biāo)題：jQuery colspan and rowspan table using cell break
原文地址：http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html
把含有rowspan、colspan的table還原。
例如原table為：
還原后的table為：
對(duì)table進(jìn)行遍歷，如果td的rowspan屬性值大于1，則給當(dāng)前的td的父元素的兄弟元素添加td，如果td的colspan屬性值大于1，則在當(dāng)前的td元素后添加td
復(fù)制代碼 代碼如下:
//本文首發(fā)博客園: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
小結(jié)
本文只提供了還原含有rowspan、colspan的table的方案之一，歡迎大家測(cè)試討論。
至于合并表格單元格網(wǎng)上已經(jīng)有了代碼：
原文標(biāo)題：jQuery colspan and rowspan table using cell break
原文地址：http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html
相關(guān)文章
Lazy Load 延遲加載圖片的jQuery插件中文使用文檔
Lazy Load 是一個(gè)用 JavaScript 編寫(xiě)的 jQuery 插件. 它可以延遲加載長(zhǎng)頁(yè)面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會(huì)被載入, 直到用戶將頁(yè)面滾動(dòng)到它們所在的位置. 這與圖片預(yù)加載的處理方式正好是相反的2012-10-10
基于jquery的滾動(dòng)條滾動(dòng)固定div(附演示下載)
今天與大家分享一下我寫(xiě)的一個(gè)滾動(dòng)條滾動(dòng)固定div的例子，現(xiàn)在很多地方都可以看到這樣的效果2012-10-10
Jquery簡(jiǎn)單分頁(yè)實(shí)現(xiàn)方法
這篇文章主要介紹了Jquery簡(jiǎn)單分頁(yè)實(shí)現(xiàn)方法,實(shí)例分析了jquery分頁(yè)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
CamanJs庫(kù)用于個(gè)人項(xiàng)目中進(jìn)行使用的圖形操作庫(kù)，這個(gè)庫(kù)是基于JavaScript的canvas操作庫(kù)，接下來(lái)，通過(guò)本篇文章給大家詳細(xì)介紹使用CamanJS在Web頁(yè)面上處理圖像的技巧，需要的朋友一起來(lái)學(xué)習(xí)下2015-08-08
這篇文章主要介紹了jQuery和CSS仿京東仿淘寶列表導(dǎo)航菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jquery驗(yàn)證郵箱格式是否正確實(shí)例講解
這篇文章主要介紹了一個(gè)jquery驗(yàn)證郵箱格式是否正確的實(shí)踐案例，利用正則表達(dá)式進(jìn)行驗(yàn)證，感興趣的小伙伴們可以參考一下2015-11-11
jQuery實(shí)現(xiàn)可展開(kāi)折疊的導(dǎo)航效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)可展開(kāi)折疊的導(dǎo)航效果,結(jié)合實(shí)例形式分析了基于jquery.easing.1.3.js插件的展開(kāi)折疊效果實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-09-09
在使用jquery操作js時(shí)，經(jīng)常弄不明白this與$(this)。最近不是很忙，抽空仔細(xì)研究了一下，記錄下來(lái)以供在忘記的時(shí)候拉出來(lái)參考參考！2014-11-11
jquery $.ajax相關(guān)用法分享，使用jquery的朋友可以參考下2012-03-03
我想熟悉javascript的沒(méi)有不知道jquery的吧，不得不提的就是特有的連綴書(shū)寫(xiě)語(yǔ)法了，jquery連綴語(yǔ)法如何實(shí)現(xiàn)，接下來(lái)將詳細(xì)介紹2012-11-11