通過jquery還原含有rowspan、colspan的table的實現方法

來源:互聯網
上載者:User

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.