Jquery-based plug-in for merging the same table cells (Lite version)

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.