Be sure to note that if you start from the list of elements of the cycle, remove an element, some elements can not find or say is not to find the element, interested members can study the HA
Code:
Copy Code code as follows:
<! DOCTYPE html>
<html>
<head>
<title>merge.html</title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are 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 () {//can implement cells, by giving the start cell comparison
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 () {//can implement merged cells, up and down rows to compare
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 style display:none to hide the same element, 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 ();
}
}
}
}
}
The
function Merge4 () {//is similar to the Merge3 method 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> Skirts </td>
<td> trousers </td>
<td> windbreaker </td>
<td> shoes </td>
</tr>
</thead>
<tbody>
<tr>
<td>8:00-9:00</td>
<td>3</td>
<td></td>
<td>4</td>
<td></td>
</tr>
<tr>
<td>9:00-10:00</td>
<td>3</td>
<td>2</td>
<td>5</td>
<td>3</td>
</tr>
<tr>
<td>10:00-11:00</td>
<td>3</td>
<td>2</td>
<td></td>
<td>1</td>
</tr>
<tr>
<td>11:00-12:00</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 you go from the start element of the list and remove an element, some elements will not be found or the element that you are looking for, preferably a loop from the back.
