Merge jquery plug-ins with the same table cells to share (very streamlined) _ jquery

Source: Internet
Author: User
There is a small requirement in the project. to merge the cells with the same content in the specified column in the table, the rowspan attribute of td is essentially involved, and the number of cells with the same content is counted, then, attach the correct value to the rowspan attribute of the first td that is different from the content of the previous line. In order to intuitively understand the effect 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.

The Code is as follows:





























































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


The 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:

The 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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.