通過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
//本文首發(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
小結
本文只提供了還原含有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
復制代碼 代碼如下:
//本文首發(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
小結
本文只提供了還原含有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 插件. 它可以延遲加載長頁面中的圖片. 在瀏覽器可視區(qū)域外的圖片不會被載入, 直到用戶將頁面滾動到它們所在的位置. 這與圖片預加載的處理方式正好是相反的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