Code:
Copy codeThe Code is as follows: <! DOCTYPE html>
<Html>
<Head>
<Title> merge.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" href = "css/jquery-ui.css"/>
<Script src = "js/jquery. js"> </script>
<Script src = "js/jquery-ui.js"> </script>
<Script type = "text/javascript">
Function merge1 () {// You can implement cells by comparing the start cells.
Var totalRow = $ ("# tbl"). find ("tr"). length;
Var totalCol = $ ("# tbl"). find ("tr"). eq (0). find ("td"). length;
For (var col = totalCol-1; col> = 1; col --){
SpanNum = 1;
StartCell = $ ("# tbl"). find ("tr"). eq (totalRow-1). find ("td"). eq (col );
For (var row = totalRow-1; row> = 1; row --){
TargetCell = $ ("# tbl"). find ("tr"). eq (row-1). find ("td"). eq (col );
If (startCell. text () = targetCell. text () & startCell. text ()! = ""){
SpanNum ++;
TargetCell. attr ("rowSpan", spanNum );
StartCell. remove ();
} Else {
SpanNum = 1;
}
StartCell = targetCell;
}
}
}
Function merge2 () {// You can merge cells and compare the upper and lower rows.
Var totalCols = $ ("# tbl"). find ("tr: eq (0)"). find ("td"). length;
Var totalRows = $ ("# tbl"). find ("tr"). length;
For (var I = totalCols-1; I> = 1; I --){
For (var j = totalRows-1; j> = 1; j --){
StartCell = $ ("# tbl"). find ("tr"). eq (j). find ("td"). eq (I );
TargetCell = $ ("# tbl"). find ("tr"). eq (j-1). find ("td"). eq (I );
If (startCell. text () = targetCell. text () & targetCell. text ()! = ""){
TargetCell. attr ("rowSpan", (startCell. attr ("rowSpan") = undefined )? 2 :( eval (startCell. attr ("rowSpan") + 1 ));
StartCell. remove ();
}
}
}
}
/* Merge first, use display: none of the style to hide the same element, and then remove
*/
Function merge3 (){
Var totalCols = $ ("# tbl"). find ("tr: eq (0)"). find ("td"). length;
Var totalRows = $ ("# tbl"). find ("tr"). length;
For (var col = totalCols-1; col> = 1; col --){
SpanNum = 1;
StartCell = $ ("# tbl"). find ("tr"). eq (totalRows-1). find ("td"). eq (col );
For (var row = totalRows-1; row> = 1; row --){
TargetCell = $ ("# tbl"). find ("tr"). eq (row-1). find ("td"). eq (col );
If (startCell. text () = targetCell. text () & startCell. text ()! = ""){
SpanNum ++;
TargetCell. attr ("rowSpan", spanNum );
StartCell. attr ("style", "visibility: hidden ");
// StartCell. attr ("style", "display: none ");
} Else {
SpanNum = 1;
}
StartCell = targetCell;
}
}
For (var j = totalCols-1; j> = 1; j --){
For (var I = totalRows-1; I> = 1; I --){
Cell = $ ("# tbl"). find ("tr"). eq (I). find ("td"). eq (j );
If (cell. attr ("style ")! = Undefined ){
If (cell. attr ("style") = "visibility: hidden "){
Cell. remove ();
}
}
}
}
}
Function merge4 () {// similar to the merge3 method, the purpose is to see the difference between display: none and visibility: hidden.
Var totalCols = $ ("# tbl"). find ("tr: eq (0)"). find ("td"). length;
Var totalRows = $ ("# tbl"). find ("tr"). length;
For (var col = totalCols-1; col> = 1; col --){
SpanNum = 1;
StartCell = $ ("# tbl"). find ("tr"). eq (totalRows-1). find ("td"). eq (col );
For (var row = totalRows-1; row> = 1; row --){
TargetCell = $ ("# tbl"). find ("tr"). eq (row-1). find ("td"). eq (col );
If (startCell. text () = targetCell. text () & startCell. text ()! = ""){
SpanNum ++;
TargetCell. attr ("rowSpan", spanNum );
StartCell. attr ("style", "display: none ");
// StartCell. attr ("style", "display: none ");
} Else {
SpanNum = 1;
}
StartCell = targetCell;
}
}
For (var j = totalCols-1; j> = 1; j --){
For (var I = totalRows-1; I> = 1; I --){
Cell = $ ("# tbl"). find ("tr"). eq (I). find ("td"). eq (j );
If (cell. attr ("style ")! = Undefined ){
If (cell. attr ("style") = "display: none "){
Cell. remove ();
}
}
}
}
}
</Script>
</Head>
<Body>
<Table id = "tbl" cellpadding = "3" border = 1>
<Thead>
<Tr>
<Td> sales time </td>
<Td> skirt </td>
<Td> pants </td>
<Td> windbreaker </td>
<Td> Shoes </td>
</Tr>
</Thead>
<Tbody>
<Tr>
<Td>-</td>
<Td> 3 </td>
<Td> </td>
<Td> 4 </td>
<Td> </td>
</Tr>
<Tr>
<Td>-</td>
<Td> 3 </td>
<Td> 2 </td>
<Td> 5 </td>
<Td> 3 </td>
</Tr>
<Tr>
<Td>-</td>
<Td> 3 </td>
<Td> 2 </td>
<Td> </td>
<Td> 1 </td>
</Tr>
<Tr>
<Td>-</td>
<Td> </td>
<Td> </td>
<Td> </td>
<Td> 1 </td>
</Tr>
</Tbody>
</Table>
<Input type = "button" value = "merge" id = "merge" onclick = "merge2 ();">
</Body>
</Html>
Summary:When using remove, be sure to note that if the element loops down from the beginning of the list, after removing an element, some elements cannot be found or are not the element to be found; it is best to start the loop from the back.
