js自动生成table

最新推荐文章于 2024-06-28 15:04:44 发布

丶争渡

最新推荐文章于 2024-06-28 15:04:44 发布

阅读量631

点赞数

文章标签： javascript jquery 动态 table

本文链接：https://blog.csdn.net/biekendiesb/article/details/52607737

版权

<!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="" />