JQuery-based code for merging adjacent cells with the same text in a table

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
Copy codeThe 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.
Copy codeThe Code is as follows:
<Script type = "text/javascript"> <! --
$ (Document). ready (function (){
_ W_table_rowspan ("# spdata", 4 );
_ W_table_rowspan ("# spdata", 3 );
_ W_table_rowspan ("# spdata", 2 );
_ W_table_rowspan ("# spdata", 1 );
});
// -->
</Script>