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