js通过后台配置动态生成html table表格_js根据后端数据渲染table-CSDN博客

本文链接：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>