js实现table增加行数

html代码

<div id="table">
	<table id="listHistory">
	<tr id="one">
	<th>id</th>
	<th>name</th>
	<th>平均数</th>
	<th>持续时间</th>
	<th>峰值</th>
	<th>开始时间</th>
	<th>结束时间</th>
	<th>视频url</th>
</tr>

js代码

var gList = [
	{
    
     "id": "001", "name": "camera1", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "002", "name": "camera2", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "003", "name": "camera3", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "001", "name": "camera1", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "002", "name": "camera2", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "003", "name": "camera3", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
]

var tableObject = document.getElementById("listHistory");
for (var i = 0; i < gList.length; i++) {
    
    
	var rows = tableObject.insertRow(i + 1);
	var id = rows.insertCell(0);
	var name = rows.insertCell(1);
	var average = rows.insertCell(2);
	var duration = rows.insertCell(3);
	var max = rows.insertCell(4);
	var begin = rows.insertCell(5);
	var end = rows.insertCell(6);
	var url = rows.insertCell(7);
	id.innerHTML = gList[i].id;
	name.innerHTML = gList[i].name;
	average.innerHTML = gList[i].average;
	duration.innerHTML = gList[i].duration;
	max.innerHTML = gList[i].max;
	begin.innerHTML = gList[i].begin;
	end.innerHTML = gList[i].end;
	url.innerHTML = gList[i].url;
}

效果图

惊现bug！！！name的值在360浏览器的极速模式下显示不出来，兼容模式就可以。初步推测是因为变量命名和属性名name重复，下例将name改为addrName就可以了。好惨一菜鸡，这种坑都踩。。。

重新上js代码（仅修改变量名name为addrName）

var gList = [
	{
    
     "id": "001", "name": "camera1", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "002", "name": "camera2", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "003", "name": "camera3", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "001", "name": "camera1", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "002", "name": "camera2", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
	{
    
     "id": "003", "name": "camera3", "average": "20", "duration": "2min", "max": "30", "begin": "23:53", "end": "23:55", "url": "https://lseap.archains.com" },
]

var tableObject = document.getElementById("listHistory");
for (var i = 0; i < gList.length; i++) {
    
    
	var rows = tableObject.insertRow(i + 1);
	var id = rows.insertCell(0);
	var addrName= rows.insertCell(1);
	var average = rows.insertCell(2);
	var duration = rows.insertCell(3);
	var max = rows.insertCell(4);
	var begin = rows.insertCell(5);
	var end = rows.insertCell(6);
	var url = rows.insertCell(7);
	id.innerHTML = gList[i].id;
	addrName.innerHTML = gList[i].name;
	average.innerHTML = gList[i].average;
	duration.innerHTML = gList[i].duration;
	max.innerHTML = gList[i].max;
	begin.innerHTML = gList[i].begin;
	end.innerHTML = gList[i].end;
	url.innerHTML = gList[i].url;
}

修改后的效果图