jquery-based plug-in for the same cell (compact version) of the merge table _jquery

Source: Internet
Author: User
Tags compact
The effect is as follows

Original form:

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 the treatment of the appearance:

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

The effect comes out, looks relatively simple, below first looks the page

Copy Code code 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 Code code as follows:

This is the form of a jquery plugin.
$ (' #process '). Mergecell ({
At present only cols such a configuration item, with an array representing the index of the column, starting from 0
The same content cell is then processed (merged) according to the specified column
Cols: [0, 3]
});

Here's a look at the complete code for this widget:
Copy Code code as follows:

;(function ($) {
See the jquery source can find $.fn is $.prototype, just for compatibility with earlier versions of Plug-ins
To keep the Jquery.prototype form.
$.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 a private method used internally by Plug-ins
I can refer to the book that I introduced in the previous essay.
function Mergecell ($table, Colindex) {
$table. Data (' col-content ', '); Storing cell contents
$table. Data (' Col-rowspan ', 1); The rowspan value that holds the calculation defaults to 1
$table. Data (' COL-TD ', $ ()); The first one to store the results is different from the previous one. TD (JQuery encapsulated), default an "empty" jquery object
$table. Data (' Trnum ', $ (' tbody tr ', $table). length); To work with the total number of rows in the table for the last line to be used for special processing
The key to our "sweep" process for each row of data is locating COL-TD, and its corresponding rowspan
$ (' tbody tr ', $table). Each (function (index) {
Colindex-column index in TD:EQ
var $td = $ (' Td:eq (' + colindex + ') ', this);
Remove the current contents of a cell
var currentcontent = $td. html ();
The first time to go this branch
if ($table. Data (' col-content ') = = ") {
$table. Data (' col-content ', currentcontent);
$table. Data (' COL-TD ', $TD);
} else {
The previous line has the same contents as the current row
if ($table. Data (' col-content ') = = currentcontent) {
The previous row is the same as the current row, and the Col-rowspan is accumulated, saving the new value
var rowspan = $table. Data (' Col-rowspan ') + 1;
$table. Data (' Col-rowspan ', rowspan);
It is important to note that if you use the $td.remove () it will affect the processing of other columns
$td. Hide ();
The last line is a little more special.
For example, the last 2 lines of TD content is the same, then to the last line should be at this time in the COL-TD saved TD set RowSpan
if (++index = $table. Data (' Trnum '))
$table. Data (' COL-TD '). attr (' rowspan ', $table. Data (' Col-rowspan '));
} else {//previous row differs from current row content
Col-rowspan defaults to 1, if the statistical col-rowspan does not change, does not handle
if ($table. Data (' Col-rowspan ')!= 1) {
$table. Data (' COL-TD '). attr (' rowspan ', $table. Data (' Col-rowspan '));
}
Save the first occurrence of different content of TD, and its contents, reset Col-rowspan
$table. Data (' COL-TD ', $TD);
$table. Data (' Col-content ', $td. html ());
$table. Data (' Col-rowspan ', 1);
}
}
});
}
It's also a private function to clean up the memory.
function Dispose ($table) {
$table. Removedata ();
}
}) (JQuery);

The main explanation should be in the comments, the code is really simple, like some places are worth improving
• The contents of the table processed are searched from tbody, if there is no tbody, it should give a more general scheme
for (var i = cols.length-1; cols[i]!= undefined; i--) ... If the table data is large and the number of columns processed is more, there is a risk that there will be a blockage of the browser thread without optimization, and consider using settimeout
• What else is worth improving, I think it should be a lot of

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.