表格合并单元格实例

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <script type="text/javascript" src="jquery-1.11.1.js"></script>
   <style type="text/css">
       td{
           border: 1px solid #ccc;
       }
   </style>
</head>
<body>
<table>
   <thead>
       <tr>
           <td>序号</td>
           <td>所属地区</td>
           <td>省份</td>
           <td>加速前延迟(ms)</td>
           <td>加速后延迟(ms)</td>
           <td>提升比例</td>
       </tr>
   </thead>
   <tbody id="tBody">
   </tbody>
</table>
<script type="text/javascript">
   var jsonData = [
       {"AreaName":"东北地区","Name":"吉林","After":43,"Before":49,"Scales":13.953488372093023},
       {"AreaName":"东北地区","Name":"黑龙江","After":21,"Before":23,"Scales":9.523809523809524},
       {"AreaName":"东北地区","Name":"辽宁","After":13,"Before":28,"Scales":53.57142857142857},
       {"AreaName":"华北地区","Name":"山西","After":58.333333333333336,"Before":95,"Scales":62.857142857142854},
       {"AreaName":"华北地区","Name":"北京","After":22.32616487455197,"Before":26.978494623655912,"Scales":20.838015732862413},
       {"AreaName":"华东地区","Name":"山东","After":28.5,"Before":45.5,"Scales":59.64912280701754},
       {"AreaName":"华东地区","Name":"江西","After":54.5,"Before":83.5,"Scales":53.21100917431193},
       {"AreaName":"华东地区","Name":"浙江","After":49.39393939393939,"Before":68.18181818181817,"Scales":38.03680981595091},
       {"AreaName":"华东地区","Name":"江苏","After":43.87671232876713,"Before":51.63013698630138,"Scales":17.670933499843912},
       {"AreaName":"华东地区","Name":"安徽","After":42.125,"Before":46.375,"Scales":10.089020771513352},
       {"AreaName":"华东地区","Name":"福建","After":63,"Before":69,"Scales":9.523809523809524},
       {"AreaName":"华南地区","Name":"香港","After":59.42857142857143,"Before":98.28571428571429,"Scales":65.38461538461539},
       {"AreaName":"华南地区","Name":"广东","After":52.356913183279744,"Before":77.07073954983923,"Scales":47.202603942762394},
       {"AreaName":"华南地区","Name":"海南","After":64,"Before":72,"Scales":12.5},
       {"AreaName":"华南地区","Name":"广西","After":62.25,"Before":66.75,"Scales":7.228915662650602},
       {"AreaName":"华中地区","Name":"河南","After":38.75,"Before":76.25,"Scales":96.7741935483871},
       {"AreaName":"华中地区","Name":"湖北","After":37.31578947368421,"Before":71.94736842105263,"Scales":92.8067700987306},
       {"AreaName":"华中地区","Name":"湖南","After":50,"Before":70,"Scales":40},
       {"AreaName":"上海市","Name":"上海","After":44.369565217391305,"Before":53.108695652173914,"Scales":19.696227339539444},
       {"AreaName":"西北地区","Name":"新疆","After":78.33333333333333,"Before":114.99999999999999,"Scales":46.80851063829786},
       {"AreaName":"西北地区","Name":"甘肃","After":46,"Before":58,"Scales":26.08695652173913},
       {"AreaName":"西北地区","Name":"宁夏","After":45,"Before":55,"Scales":22.22222222222222},
       {"AreaName":"西北地区","Name":"陕西","After":42.75,"Before":48.25,"Scales":12.865497076023392},
       {"AreaName":"西南地区","Name":"四川","After":52.44186046511628,"Before":77.32558139534883,"Scales":47.45011086474501},
       {"AreaName":"西南地区","Name":"云南","After":67.625,"Before":82.875,"Scales":22.55083179297597},
       {"AreaName":"西南地区","Name":"贵州","After":84,"Before":92,"Scales":9.523809523809524},
       {"AreaName":"西南地区","Name":"重庆","After":62,"Before":66,"Scales":6.451612903225806}
   ]
   var jsonData1 =  [
       {"AreaName":"东北地区","Name":"吉林","After":17.952380952380953,"Before":53.85714285714286,"Scales":200.00000000000006},
       {"AreaName":"东北地区","Name":"辽宁","After":10.823529411764707,"Before":32.470588235294116,"Scales":199.99999999999997},
       {"AreaName":"东北地区","Name":"黑龙江","After":21.442307692307693,"Before":24.32692307692308,"Scales":13.452914798206287},
       {"AreaName":"华北地区","Name":"天津","After":17.253164556962027,"Before":51.75949367088608,"Scales":200},
       {"AreaName":"华北地区","Name":"北京","After":19.106508875739646,"Before":57.319526627218934,"Scales":199.99999999999994},
       {"AreaName":"华北地区","Name":"山西","After":34.357142857142854,"Before":63.07142857142856,"Scales":83.57588357588357},
       {"AreaName":"华北地区","Name":"河北","After":26.291666666666668,"Before":38.875,"Scales":47.86053882725832},
       {"AreaName":"华北地区","Name":"内蒙古","After":22.3,"Before":26.900000000000002,"Scales":20.627802690582968},
       {"AreaName":"华东地区","Name":"江苏","After":38.6,"Before":75.80000000000001,"Scales":96.37305699481867},
       {"AreaName":"华东地区","Name":"福建","After":58.5,"Before":95.5,"Scales":63.24786324786324},
       {"AreaName":"华东地区","Name":"江西","After":50,"Before":70,"Scales":40},
       {"AreaName":"华东地区","Name":"山东","After":24.578635014836795,"Before":33.73590504451039,"Scales":37.25703247615599},
       {"AreaName":"华东地区","Name":"浙江","After":40.21153846153846,"Before":40.63461538461538,"Scales":1.0521281683404988},
       {"AreaName":"华南地区","Name":"广东","After":51.848101265822784,"Before":75.54430379746836,"Scales":45.703125000000014},
       {"AreaName":"华南地区","Name":"广西","After":65,"Before":75,"Scales":15.384615384615385},
       {"AreaName":"华中地区","Name":"河南","After":31.764705882352942,"Before":55.294117647058826,"Scales":74.07407407407408},
       {"AreaName":"华中地区","Name":"湖南","After":47.5,"Before":62.5,"Scales":31.57894736842105},
       {"AreaName":"华中地区","Name":"湖北","After":43,"Before":49,"Scales":13.953488372093023},
       {"AreaName":"上海市","Name":"上海","After":36.95774647887324,"Before":70.87323943661971,"Scales":91.76829268292681},
       {"AreaName":"西北地区","Name":"陕西","After":35.25,"Before":65.75,"Scales":86.52482269503547},
       {"AreaName":"西南地区","Name":"四川","After":50.285714285714285,"Before":70.85714285714286,"Scales":40.90909090909092},
       {"AreaName":"西南地区","Name":"云南","After":75,"Before":105,"Scales":40}
   ]
   var content =jsonData1
   setTable(content,$("#tBody"))
  function setTable(content,obj){
      obj.html('')
      var rows  = 1
      var j = 0
      for(var i=0;i<content.length;i++){
          if(i==0){
              var html = ''
              html += '<tr>'
              html += '<td>'+(i+1)+'</td>'
              html += '<td rowspan="'+rows+'" id="rows'+j+'">'+content[i].AreaName+'</td>'
              html += '<td>'+content[i].Name+'</td>'
              html += '<td>'+content[i].After.toFixed(2)+'</td>'
              html += '<td>'+content[i].Before.toFixed(2)+'</td>'
              html += '<td>'+content[i].Scales.toFixed(2)+'</td>'
              html += '</tr>'
              obj.append(html)
          }else{
              if(content[i].AreaName == content[i-1].AreaName){
                  var html = ''
                  html += '<tr>'
                  html += '<td>'+(i+1)+'</td>'
                  html += '<td>'+content[i].Name+'</td>'
                  html += '<td>'+content[i].After.toFixed(2)+'</td>'
                  html += '<td>'+content[i].Before.toFixed(2)+'</td>'
                  html += '<td>'+content[i].Scales.toFixed(2)+'</td>'
                  html += '</tr>'
                  rows++
                  obj.append(html)
                  $("#rows"+j).attr('rowspan',rows)
              } else {
                  rows  = 1
                  j++
                  var html = ''
                  html += '<tr>'
                  html += '<td>'+(i+1)+'</td>'
                  html += '<td rowspan="'+rows+'" id="rows'+j+'">'+content[i].AreaName+'</td>'
                  html += '<td>'+content[i].Name+'</td>'
                  html += '<td>'+content[i].After.toFixed(2)+'</td>'
                  html += '<td>'+content[i].Before.toFixed(2)+'</td>'
                  html += '<td>'+content[i].Scales.toFixed(2)+'</td>'
                  html += '</tr>'
                  obj.append(html)
              }
          }
      }
  }
</script>
</body>
</html>    

上一篇:高德地图使用实例二

下一篇:Easyui 多重表格渲染实例