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

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