The effect is as follows:
Original table:
Col0 |
Col1 |
Col2 |
Col3 |
SuZhou |
11111 |
22222 |
SuZhouCity |
SuZhou |
33333 |
44444 |
SuZhouCity |
SuZhou |
55555 |
66666 |
SuZhouCity |
ShangHai |
77777 |
88888 |
ShangHaiCity |
ShangHai |
Uuuuu |
Hhhhh |
ShangHaiCity |
ShangHai |
Ggggg |
Ccccc |
ShangHaiCity |
GuangZhou |
Ttttt |
Eeeee |
GuangZhouCity |
GuangZhou |
Ppppp |
Qqqqq |
GuangZhouCity |
After processing:
Col0 |
Col1 |
Col2 |
Col3 |
SuZhou |
11111 |
22222 |
SuZhouCity |
33333 |
44444 |
55555 |
66666 |
ShangHai |
77777 |
88888 |
ShangHaiCity |
Uuuuu |
Hhhhh |
Ggggg |
Ccccc |
GuangZhou |
Ttttt |
Eeeee |
GuangZhouCity |
Ppppp |
Qqqqq |
It looks simple. Next let's take a look at the page.
Copy codeThe Code is as follows:
<Table id = "process" cellpadding = "2" cellspacing = "0" border = "1">
<Thead>
<Tr>
<Td> col0 </td>
<Td> col1 </td>
<Td> col2 </td>
<Td> col3 </td>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td> SuZhou </td>
<Td> 11111 </td>
<Td> 22222 </td>
<Td> SuZhouCity </td>
</Tr>
<Tr>
<Td> SuZhou </td>
<Td> 33333 </td>
<Td> 44444 </td>
<Td> SuZhouCity </td>
</Tr>
<Tr>
<Td> SuZhou </td>
<Td> 55555 </td>
<Td> 66666 </td>
<Td> SuZhouCity </td>
</Tr>
<Tr>
<Td> ShangHai </td>
<Td> 77777 </td>
<Td> 88888 </td>
<Td> ShangHaiCity </td>
</Tr>
<Tr>
<Td> ShangHai </td>
<Td> uuuuu </td>
<Td> hhhhh </td>
<Td> ShangHaiCity </td>
</Tr>
<Tr>
<Td> ShangHai </td>
<Td> ggggg </td>
<Td> ccccc </td>
<Td> ShangHaiCity </td>
</Tr>
<Tr>
<Td> GuangZhou </td>
<Td> ttttt </td>
<Td> eeeee </td>
<Td> GuangZhouCity </td>
</Tr>
<Tr>
<Td> GuangZhou </td>
<Td> ppppp </td>
<Td> qqqqq </td>
<Td> GuangZhouCity </td>
</Tr>
</Tbody>
</Table>
Core code:
Copy codeThe Code is as follows:
// A jquery plug-in is written here.
$ ('# Process'). mergeCell ({
// Currently, only one configuration item, cols, uses arrays to represent the column index, starting from 0.
// Process (merge) cells with the same content based on the specified Column
Cols: [0, 3]
});
Let's take a look at the complete code of this small plug-in:
Copy codeThe Code is as follows:
; (Function ($ ){
// After reading the jquery source code, you can find that $. fn is $. prototype, just to be compatible with plug-ins of earlier versions
// The jQuery. prototype format is retained.
$. Fn. mergeCell = function (options ){
Return this. each (function (){
Var cols = options. cols;
For (var I = cols. length-1; cols [I]! = Undefined; I --){
// Fixbug console debugging
// Console. debug (cols [I]);
MergeCell ($ (this), cols [I]);
}
Dispose ($ (this ));
});
};
// If the closure and scope concepts of javascript are clear, this is the private method used inside the plug-in.
// For details, refer to the book I introduced in my previous article.
Function mergeCell ($ table, colIndex ){
$ Table. data ('col-content', ''); // store the cell content
$ Table. data ('col-rowspan ', 1); // stores the calculated rowspan value. The default value is 1.
$ Table. data ('col-td ', $ (); // stores the first found result different from the previous one td (encapsulated by jQuery ), the default jquery object is "null ".
$ Table. data ('trnum', $ ('tbody tr', $ table ). length); // The total number of rows in the table to be processed. This parameter is used for determining the last row during special processing.
// The Key To "scanning" each row of data is to locate col-td and its corresponding rowspan.
$ ('Tbody tr', $ table). each (function (index ){
// Td: colIndex In eq, that is, column Index
Var $ td = $ ('td: eq ('+ colIndex +') ', this );
// Retrieves the current content of a cell.
Var currentContent = javastd.html ();
// This branch is used for the first time
If ($ table. data ('col-content') = ''){
$ Table. data ('col-content', currentContent );
$ Table. data ('col-td ', $ td );
} Else {
// The content of the last row is the same as that of the current row.
If ($ table. data ('col-content') = currentContent ){
// If the content of the previous row is the same as that of the current row, col-rowspan is used up to save the new value.
Var rowspan = $ table. data ('col-rowspan ') + 1;
$ Table. data ('col-rowspan ', rowspan );
// It is worth noting that if $ td. remove () is used, the processing of other columns will be affected.
$ Td. hide ();
// The Last Row is more special.
// For example, if the content in the last two lines of td is the same, the td saved in col-td should be set to rowspan in the last line.
If (++ index = $ table. data ('trnum '))
$ Table. data ('col-td '). attr ('rowspan', $ table. data ('col-rowspan '));
} Else {// the content of the last row is different from that of the current row
// Col-rowspan is 1 by default. If the measured col-rowspan does not change, it is not processed.
If ($ table. data ('col-rowspan ')! = 1 ){
$ Table. data ('col-td '). attr ('rowspan', $ table. data ('col-rowspan '));
}
// Save the td with different content for the first time, and reset col-rowspan
$ Table. data ('col-td ', $ td );
$ Table. data ('col-content', effectd.html ());
$ Table. data ('col-rowspan ', 1 );
}
}
});
}
// It is also a private function used to clean up memory
Function dispose ($ table ){
$ Table. removeData ();
}
}) (JQuery );
The main description should be included in the comments, and the code is indeed relatively simple. It is worth improving in some places.
• The processed table content is searched from tbody. If there is no tbody, a more general solution should be provided.
• For (var I = cols. length-1; cols [I]! = Undefined; I --)... if the table contains a large amount of data and a large number of columns are processed, the risk of browser thread blocking may be caused by No optimization. You can use setTimeout
• I think there should be many other things worth improving.