表格合并单元格实例
表格合并单元格实例
<!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 多重表格渲染实例
文章
总共 0 条评论