js动态画表格（合并行，动态判断，前提:数据已经排好顺序）

于 2014-03-11 15:58:53 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： java script 文章标签： 画表格 js table 合并
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piesuit/article/details/21020133
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
window.οnlοad=function(){
                initBaoKaoXueKeTable("[{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'A','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'B','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'S','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'D','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'F','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'G','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'A','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'D','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'S','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'F','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'W','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'V','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'A','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'D','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'SD','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'DD','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'DS','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'FSD','LXDH':'0000001'}]");
          }
function parseJsonEntity(str){
   try{
     eval('var obj='+str);
     return obj;
     }catch(e){
          return null;
     }
}
//初始化组织机构Table
        function initBaoKaoXueKeTable(list){
                  var tabZhuanYeInfo = document.getElementById('tabXueKeInfo');
                  var zhiWuJson = parseJsonEntity(list);
                  var row = null;
                  if(zhiWuJson == null || zhiWuJson.length == 0){
                      
                       return;
                  }
                    tabLength=tabZhuanYeInfo.rows.length;
                    alert("最初表格的行数是："+tabLength+"行");
                    alert("数组的length是："+zhiWuJson.length);
               //添加行的行号
               var idi = tabLength;
               //标记相同的代码
               var olddm = zhiWuJson[0].XKDM;
               //合并结束的行号
               var hbhs = 0;
              
               for(var i=0;i<zhiWuJson.length;i++){         
                    var entity = zhiWuJson[i];
                    var row = tabZhuanYeInfo.insertRow(idi);
                   
                    //序号
                    var cell=row.insertCell();
                    cell.innerHTML = i+1;
                    cell.style.textAlign = "center";
                    row.appendChild(cell);
                    //代码
                    //判断合并的行数:规则，从当前的i开始，相同每次加一，否则清除为1
                    //当开始的时候根据当前循环的数据下标和应当合并结束的行号比较，如果到了要结束的行号，则说明是新的数据，需要重新判断合并的行数
                    if(i>=hbhs){
                         var xtdm = 1;
                         for(var j=i+1;j<zhiWuJson.length;j++){
                              if(entity.XKDM==zhiWuJson[j].XKDM){
                                   xtdm++;
                                   }else{
                                        break;
                                        }
                         }
                         hbhs = i+xtdm;
                        
                         var cell=row.insertCell();
                         cell.rowSpan=xtdm;
                         cell.innerHTML=entity.XKDM;
                         cell.style.textAlign = "center";    
                        
                         //名称
                         var cell=row.insertCell();
                         cell.rowSpan=xtdm;
                         cell.innerHTML=entity.XKMC;
                         cell.style.textAlign = "center";
                         row.appendChild(cell);                              
                   
                    }
              
                    //联系人
                    var cell=row.insertCell();
                    cell.innerHTML=entity.LXR;
                    cell.style.textAlign = "center";
                    row.appendChild(cell);
                        
                    //联系电话
                    var cell=row.insertCell();
                    cell.innerHTML=entity.LXDH;
                    cell.style.textAlign = "center";
                    row.appendChild(cell);
                    idi++;
               }
              

        }


</script>
</head>

<body>

<table id="tabXueKeInfo" border="1" cellpadding="0" cellspacing="0"
                         style="width: 100%" >
                         <tr>
                         <td>
                         序号
                         </td>
                         <td>
                         代码
                         </td>
                         <td>
                         名称
                         </td>
                         <td>
                         联系人
                         </td>
                         <td>
                         联系电话
                         </td>
                         </tr>
                    </table>

</body>
</html>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
window.οnlοad=function(){
                initBaoKaoXueKeTable("[{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'A','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'B','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'S','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'D','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'F','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A','XKDM':'0776','LXR':'G','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'A','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'D','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'S','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'F','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'W','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A1','XKDM':'07761','LXR':'V','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'A','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'D','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'SD','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'DD','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'DS','LXDH':'0000001'},{'PXWZ':'1','XKMC':'学科名称A2','XKDM':'07762','LXR':'FSD','LXDH':'0000001'}]");
          }
function parseJsonEntity(str){
   try{
     eval('var obj='+str);
     return obj;
     }catch(e){
          return null;
     }
}
//初始化组织机构Table
        function initBaoKaoXueKeTable(list){
                  var tabZhuanYeInfo = document.getElementById('tabXueKeInfo');
                  var zhiWuJson = parseJsonEntity(list);
                  var row = null;
                  if(zhiWuJson == null || zhiWuJson.length == 0){
                      
                       return;
                  }
                    tabLength=tabZhuanYeInfo.rows.length;
                    alert("最初表格的行数是："+tabLength+"行");
                    alert("数组的length是："+zhiWuJson.length);
               //添加行的行号
               var idi = tabLength;
               //标记相同的代码
               var olddm = zhiWuJson[0].XKDM;
               //合并结束的行号
               var hbhs = 0;
              
               for(var i=0;i<zhiWuJson.length;i++){         
                    var entity = zhiWuJson[i];
                    var row = tabZhuanYeInfo.insertRow(idi);
                   
                    //序号
                    var cell=row.insertCell();
                    cell.innerHTML = i+1;
                    cell.style.textAlign = "center";
                    row.appendChild(cell);
                    //代码
                    //判断合并的行数:规则，从当前的i开始，相同每次加一，否则清除为1
                    //当开始的时候根据当前循环的数据下标和应当合并结束的行号比较，如果到了要结束的行号，则说明是新的数据，需要重新判断合并的行数
                    if(i>=hbhs){
                         var xtdm = 1;
                         for(var j=i+1;j<zhiWuJson.length;j++){
                              if(entity.XKDM==zhiWuJson[j].XKDM){
                                   xtdm++;
                                   }else{
                                        break;
                                        }
                         }
                         hbhs = i+xtdm;
                        
                         var cell=row.insertCell();
                         cell.rowSpan=xtdm;
                         cell.innerHTML=entity.XKDM;
                         cell.style.textAlign = "center";    
                        
                         //名称
                         var cell=row.insertCell();
                         cell.rowSpan=xtdm;
                         cell.innerHTML=entity.XKMC;
                         cell.style.textAlign = "center";
                         row.appendChild(cell);                              
                   
                    }
              
                    //联系人
                    var cell=row.insertCell();
                    cell.innerHTML=entity.LXR;
                    cell.style.textAlign = "center";
                    row.appendChild(cell);
                        
                    //联系电话
                    var cell=row.insertCell();
                    cell.innerHTML=entity.LXDH;
                    cell.style.textAlign = "center";
                    row.appendChild(cell);
                    idi++;
               }
              

        }


</script>
</head>

<body>

<table id="tabXueKeInfo" border="1" cellpadding="0" cellspacing="0"
                         style="width: 100%" >
                         <tr>
                         <td>
                         序号
                         </td>
                         <td>
                         代码
                         </td>
                         <td>
                         名称
                         </td>
                         <td>
                         联系人
                         </td>
                         <td>
                         联系电话
                         </td>
                         </tr>
                    </table>

</body>
</html>

piesuit
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值