js通过后台配置动态生成html table表格

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/dreamsigel/article/details/76081365

首先说明下需求,不同的需求可能实现不一样。

我的需求是同学问我如何通过后台动态的配置,然后动态的生成前台的html table。

因为他们的前台页面是写死的,表格的每一行每一列,除了数据。

我们先来看看数据情况。



他希望一级二级指标和三级指标内容发生变化时,也就是动态的添加一级,二级,三级指标时,如何实现一级二级的合并效果。

这个问题一开始我上网搜索excel模板转换html。。但是转换都是固定的内容,也就是模板固定了。动态填充数据是不可能的。

要填充也是单元格填充,不能内容完全动态。

基于这个需求,我自己写了一个html的例子。也不是完全的动态,手动的指定 了第一列和第二列为标题列。


原理是:将每一列及其对应的合并行数读出来,然后,判断第一列和第二列的名称,如果第一次处理,就添加td 且rowspan。

否则,就只添加第三列的td。


废话不多说,,上代码。。(模拟数据见代码)

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <style>

		*{
			padding:0px;
			margin:0px;
		}
		table{
			width:100%;
			height:100%;
		}

		table td{
			text-align:center;
			border:solid 1px;
		}
  </style>
 </head>
 <body>
  <table>
	<thead>
		<tr><td>列1</td><td>列2</td><td>列3</td></tr>
	</thead>
	<tbody id="tb">
		
	</tbody>
  </table>
  <script>
	var json=[
		{"t1":{"t":"a1","rows":5},"t2":{"t":"b1","rows":3},"t3":{"t":"c1","rows":1}},
		{"t1":{"t":"a1","rows":5},"t2":{"t":"b1","rows":3},"t3":{"t":"c2","rows":1}},
		{"t1":{"t":"a1","rows":5},"t2":{"t":"b1","rows":3},"t3":{"t":"c3","rows":1}},
		{"t1":{"t":"a1","rows":5},"t2":{"t":"b2","rows":2},"t3":{"t":"c4","rows":1}},
		{"t1":{"t":"a1","rows":5},"t2":{"t":"b2","rows":2},"t3":{"t":"c5","rows":1}}
	];
	//json = JSON.parse(json);
	
	draw(json);

	function draw(json){

		var t1='',t2='';
	
		$.each(json,function(i,item){
			var html = '<tr>';
			
			if(t1=='' || t1!=item.t1.t){
				html += '<td rowspan="'+item.t1.rows+'">'+item.t1.t+'</td>';
				t1 = item.t1.t;
			}
			
			if(t2=='' || t2!=item.t2.t){
				html += '<td rowspan="'+item.t2.rows+'">'+item.t2.t+'</td>';
				t2 = item.t2.t;
			}
			
			html += '<td>'+item.t3.t+'</td>';
			html +='</tr>';
			
			$('#tb').append(html);
		});
		
	}
  </script>
 </body>
</html>


阅读更多
换一批

没有更多推荐了,返回首页