Sometimes it is necessary to merge adjacent cells with the same text in the table. For more information, see.
ONE
The generated data table is roughly as follows:
Region |
Region |
Product Code |
Product Name |
Quantity |
Valid till |
Validity Period (month) |
Product batch number |
Specification |
Unit |
Bar Code |
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
Guangdong |
Guangzhou |
00027 |
White Flower Oil |
|
|
|
|
|
|
|
Guangdong |
Guangzhou |
00028 |
Safflower oil |
|
|
|
|
|
|
|
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
The cells in the first four columns with the same text must be automatically merged. The merge results are as follows:
Region |
Region |
Product Code |
Product Name |
Quantity |
Valid till |
Validity Period (month) |
Product batch number |
Specification |
Unit |
Bar Code |
Guangdong |
Shenzhen |
00028 |
Safflower oil |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Guangzhou |
00027 |
White Flower Oil |
|
|
|
|
|
|
|
00028 |
Safflower oil |
|
|
|
|
|
|
|
Shenzhen |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1. Introduce jQuery in the html head
2. Add the function for merging Cells
The Code is as follows:
// Function Description: merges adjacent cells of the same text in the specified table (table id is _ w_table_id) specified column (number of columns is _ w_table_colnum)
// Parameter description: _ w_table_id is the id of the table in which cells need to be merged. If you specify table id = "data" in HTMl, this parameter must be # data
// Parameter description: _ w_table_colnum is the column of the cell to be merged. It is a number starting from Column 1 on the left.
Function _ w_table_rowspan (_ w_table_id, _ w_table_colnum ){
_ W_table_firsttd = "";
_ W_table_currenttd = "";
_ W_table_SpanNum = 0;
_ W_table_Obj = $ (_ w_table_id + "tr td: nth-child (" + _ w_table_colnum + ")");
_ W_table_Obj.each (function (I ){
If (I = 0 ){
_ W_table_firsttd = $ (this );
_ W_table_SpanNum = 1;
} Else {
_ W_table_currenttd = $ (this );
If (_ w_table_firsttd.text () = _ w_table_currenttd.text ()){
_ W_table_SpanNum ++;
_ W_table_currenttd.hide (); // remove ();
_ W_table_firsttd.attr ("rowSpan", _ w_table_SpanNum );
} Else {
_ W_table_firsttd = $ (this );
_ W_table_SpanNum = 1;
}
}
});
}
// Function Description: merges adjacent cells of the same text in the specified table (table id is _ w_table_id) specified row (number of rows is _ w_table_rownum)
// Parameter description: _ w_table_id is the table id of the cells to be merged. If you specify table id = "data" in HTMl, this parameter must be # data
// Parameter description: _ w_table_rownum is the row of the cell to be merged. For the parameter format, see nth-child parameters in jQuery.
// If it is a number, it starts from the first row 1 on the leftmost side.
// "Even" indicates an even number of rows
// "Odd" indicates an odd number of rows
// The number of rows indicated by "3n + 1" is 1, 4, 7, and 10.
// Parameter description: _ w_table_maxcolnum is the maximum number of columns corresponding to cells in the specified row. Cells with more columns than this value are not compared and merged.
// This parameter can be null. If it is null, all cells in the specified row must be compared and merged.
Function _ w_table_colspan (_ w_table_id, _ w_table_rownum, _ w_table_maxcolnum ){
If (_ w_table_maxcolnum = void 0) {_ w_table_maxcolnum = 0 ;}
_ W_table_firsttd = "";
_ W_table_currenttd = "";
_ W_table_SpanNum = 0;
$ (_ W_table_id + "tr: nth-child (" + _ w_table_rownum + ")"). each (function (I ){
_ W_table_Obj = $ (this). children ();
_ W_table_Obj.each (function (I ){
If (I = 0 ){
_ W_table_firsttd = $ (this );
_ W_table_SpanNum = 1;
} Else if (_ w_table_maxcolnum> 0) & (I> _ w_table_maxcolnum )){
Return "";
} Else {
_ W_table_currenttd = $ (this );
If (_ w_table_firsttd.text () = _ w_table_currenttd.text ()){
_ W_table_SpanNum ++;
_ W_table_currenttd.hide (); // remove ();
_ W_table_firsttd.attr ("colSpan", _ w_table_SpanNum );
} Else {
_ W_table_firsttd = $ (this );
_ W_table_SpanNum = 1;
}
}
});
});
}
3. Call the Merge function in the html head to merge cells.
The Code is as follows: