通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法
更新時間：2012年02月10日 19:33:46 作者：
通過jquery還原含有rowspan、colspan的table的實現(xiàn)方法，學(xué)習(xí)jquery的朋友可以參考下
需求
把含有rowspan、colspan的table還原。
例如原table為：
對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的方案之一，歡迎大家測試討論。
至于合并表格單元格網(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為：
對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的方案之一，歡迎大家測試討論。
至于合并表格單元格網(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)文章
當(dāng)用戶需要某項功能時要填寫一些表單信息，在填寫完成并提交后，該部分信息是不允許再次修改的。表單包含TextBox、DropDownList、CheckBox等控件。2010-04-04
大家在qq聊天或者是玩微信時發(fā)表自己的心情，都會允許加入表情，大家知道qq表情是怎么實現(xiàn)的嗎，接下來，通過本篇文章給大家實例講解基于jQuery實現(xiàn)的QQ表情插件，需要的朋友可以參考下2015-08-08
jquery獲取所有選中的checkbox實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query獲取所有選中的checkbox實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery綁定事件 bind和on的用法與區(qū)別分析
這篇文章主要介紹了jquery綁定事件 bind和on的用法與區(qū)別,結(jié)合實例形式分析了jquery綁定事件 bind和on的基本功能、用法、區(qū)別與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了jQuery簡單獲取鍵盤事件的方法,涉及jQuery針對鍵盤事件的獲取與響應(yīng)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery實現(xiàn)彈出窗口彈出div層的實例代碼,點擊頁面的鏈接，彈出一個div層，同時頁面的其他部分變灰并且不能點擊,，具體實現(xiàn)代碼大家參考下本文吧2017-01-01
jquery自定義插件開發(fā)之window的實現(xiàn)過程
這篇文章主要介紹了jquery自定義插件開發(fā)之window的實現(xiàn)過程的相關(guān)資料,需要的朋友可以參考下2016-05-05
WEB前端開發(fā)都應(yīng)知道的jquery小技巧及jquery三個簡寫
一個簡單技巧的集合，幫你提升 jQuery 技能，下面腳本之家小編給大家收集整理了web前端開發(fā)都應(yīng)知道的jquery小技巧，對jquery小技巧感興趣的朋友一起學(xué)習(xí)吧2015-11-11
基于jQuery的判斷iPad、iPhone、Android是橫屏還是豎屏的代碼
在ipad、iphone網(wǎng)頁開發(fā)中，我們很可能需要判斷是橫屏或者豎屏。下面就來介紹如何用 jQuery 判斷iPad、iPhone、Android是橫屏還是豎屏的方法2014-05-05
這篇文章主要內(nèi)容是JQuery實現(xiàn)可編輯的表格實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-09-09