Use the JS method to merge the cells in the table table that specify the same contents in the row specified by the column.

First, Introduction

Use the JS method to combine rows and columns of table tables in HTML.

There are many examples of how to do this on the web, but most do not apply depending on the actual business.

So on the basis of the methods written by the great God on the Internet, some modifications are made to suit the use of their business.

Second, JS method

1 functionMergetablecell (TableId, StartRow, Endrow, col) {2     varTB =document.getElementById (tableId);3     //set to 0 o'clock to retrieve all rows4     if(Endrow = = 0) {5Endrow = tb.rows.length-1;6     }7     //specifies that the data row index is greater than the table row number8     if(Endrow >=tb.rows.length) {9         return;Ten     } One     //detects whether the specified column index exceeds the number of table columns A     if(Col >= tb.rows[0].cells.length) { -         return; -     } the     //data rows to be judged by the loop -      for(vari = StartRow; i < Endrow; i++) { -         //If the current row is the same as the next row of data values, the preceding column is judged -         if(tb.rows[startrow].cells[col].innerhtml = = tb.rows[i + 1].cells[col].innerhtml) { +             varsame =true; -             //The loop is judged by all of the previous sibling data rows +              for(varj = col; J > 0; j--) { A                 if(tb.rows[startrow].cells[j-1].innerhtml! = tb.rows[i + 1].cells[j-1].innerhtml) { atsame =false; -                      Break; -                 } -             } -             //if the previous sibling data rows have the same values, the cell is merged -             if(true==same) { in                 //Delete the No. 0 column of cells in the next row if the same -Tb.rows[i + 1].cells[col].style.display = ' None '; to                 //Update rowspan Properties +Tb.rows[startrow].cells[col].rowspan = (Tb.rows[startrow].cells[col].rowspan | 0) + 1; -             } the             Else { *                 //Increase start line $StartRow = i + 1;Panax Notoginseng             } -         } the         Else { +             //Increase start line AStartRow = i + 1; the         } +     } -}

View Code

Three, simple interpretation

1, Function: Merge the contents of the table together
2, Parameter:
TABLEID: Table ID,
StartRow: Start row (starting at index 0) if there is a header row then fill in 1
Endrow: Terminating line (index value) automatically assigned if 0 is filled
Col: Columns to be processed (index value)
3, Example
Mergetablecell ("Table_test", 2, 0, 1);
ID of the Para1:table_test,table table
Para2:2, the index value of the Start row
para3:0, the index value of the end row
Para4:1, the index value of the column to be processed
4, Worning
(1) Merge one column, normal call
Example: Mergetablecell ("Table_test", 2, 0, 0);
(2) Merging multiple columns to arrange the columns to be processed from large to small
Example: Merging the first and second columns
Mergetablecell ("Table_test", 2, 0, 1);
Mergetablecell ("Table_test", 2, 0, 0);
Reason:
When merging the second column, you need to determine if the value of the first column is the same.
If the values of the first column are not the same, the merge is not performed.
Table Col1 col2
Row1 Anhui Province
Row2 Zhejiang Province
As above, although the value of the second column is "province",
However, the values of the first column are not the same, so the merging of cells is not done.
Principle:
The two rows of data at the top of the merge are consistent with the peers in the preceding column.
If they are consistent, they are merged.
If you first merge the values of the first column,
The value of the preceding column is empty when you decide whether the preceding column values are consistent in the subsequent merge.
It is not possible to judge the value of the same as normal.

The

uses the JS method to merge the cells in the table table that specify the same contents in the row specified by the column.