WEB开发网
开发学院网页设计JavaScript JQuery实现表格的相同单元格合并 阅读

JQuery实现表格的相同单元格合并

 2012-11-02 16:28:39 来源:WEB开发网   
核心提示: 表格中相同单元格合并是经常需要用到的,针对自己做的方法做个小总结,JQuery实现表格的相同单元格合并,先看一下合并前效果图, 合并后的效果图:代码:<!DOCTYPE html><html> <head> <title>merge.html</titl

 表格中相同单元格合并是经常需要用到的,针对自己做的方法做个小总结,先看一下合并前效果图,

 
 
合并后的效果图:
代码:
<!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(){         //可实现单元格,通过给 开始cell的比较
    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() {     //可实现合并单元格,上下行来比较
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();

}
}
 }

/*先合并,使用style 的display:none将相同元素隐藏,然后再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(){       //与merge3方法类似,目的是看一下 display:none与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>销售时间</td>
     <td>裙子</td>
     <td>裤子</td>
     <td>风衣</td>
     <td>鞋子</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="合并" id="merge" onclick="merge2();"> 
  </body>
</html>
总结 :在使用remove的时候 ,一定要注意如果 从list的开始元素循环下去,remove掉一个元素后,有些元素就找不到了或者说不是要找的那个元素;最好是从后面开始循环。

Tags:JQuery 实现 表格

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接