<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态测试</title>
<script type="text/javascript" src="../../lib/jquery-1.8.0.min.js"></script>
<style type="text/css">
body,html{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
font-family: "微软雅黑";
}
table tbody tr td{
/*border: 1px solid #d2d2d2;*/
text-align: center;
font-size: 16px;
/*font-weight: bold;*/
/* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */
border: 1px solid black;
/* 设置边框属性;样式(solid=实线)、颜色(#999=灰) */
/*border-width: 1px 1px;*/
/* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */
word-wrap: break-word;
/*可以使半角连续字符强制换行,不至于撑破列宽。 */
table-layout:fixed;
}
</style>
<script type="text/javascript">
//var json = "";
window.onload = function(){
var html = "";
var json = {
"啊尔多":{'一':57.4},
"盐城":{'二':96.2,'三':89.2,'四':71.4},
"水县":{'五':111.8,'六':108.5,'七':100.8,'八':96,'九':86.1,
'十':85.6,'十一':83.2,'十二':81.2,'十三':67.7,'十四':62.7,
'十五':57.7,'十六':57.3,'十七':54.5,'十八':52},
"蒙多":{'十九':84.8,'二十':78.5,'二十一':68,'二十二':62.0,'二十三':57.1,'二十四':54.4}
};
//var json = eval('('+ data +')');
for(var p in json){
var i = 0;
html += "<tr class='one_table_rm'>";
for(var z in json[p]){
i++;
}
var col = Math.ceil(i / 5);//向上取整
//col+= (i % 5) == 0 ? 0 : 1;
html += "<td rowspan='"+col+"'>"+p+"</td>";
var index = 0,isFirst = true;
for(var z in json[p]){
if(index == 5){
index = 0; isFirst = false;
html += "</tr>";
}
if(index == 0 && !isFirst){
html += "<tr class='one_table_rm'>";
}
html += "<td>" + json[p][z] + "</td>";
index ++;
}
if(5 - index > 0){
var ic = 5 - index;
for(var icIndex = 0; icIndex < ic ; icIndex++){
html += "<td></td>";
}
}
html += "</tr>";
};
$('.one_table_rm').remove();
$('.one_tab_tb').children('tbody').html(html);
}
</script>
</head>
<body>
<table class="one_tab_tb" style="border-collapse: collapse;">
<tbody>
</tbody>
</table>
</body>
</html>
<img src="https://img-blog.csdn.net/20160921144049955?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />