Requirement
Restore a table containing rowspan and colspan.
For example, the original table is:
The restored table is:
Code principle
Traverse the table. If the rowspan attribute value of td is greater than 1, add td to the sibling element of the parent element of the current td. If the colspan attribute value of td is greater than 1, add td after the current td ElementCopy codeThe Code is as follows: // This article first blog Park: http://artwl.cnblogs.com () 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 );
}
});
});
}
Online Demo http://demo.jb51.net/js/2012/jquery_demo/jquery_rowspan_colspan_table.html
Summary
This article only provides one solution to restore a table containing rowspan and colspan. You are welcome to test and discuss it.
The following code is available for merging table cell networks:
Original article title: jQuery colspan and rowspan table using cell break
Address: http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html