动态生成表格案例

CSS代码如下：

<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			table{
				text-align: center;
				margin: 100px auto;
			}
			thead tr{
				background-color: #CCCCCC;
			}
			thead tr td{
				width: 120px;
				height: 30px;
				line-height: 30px;
			}
			tbody a{
				color: pink;
			}
		</style>

主体代码

<table border="" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<td>姓名</td>
					<td>科目</td>
					<td>成绩</td>
					<td>操作</td>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>

JS代码

<script type="text/javascript">
			//1.先去准备数据
			var datas = [{
				name:'佩奇',
				subject:'JavaScript',
				score:100
			},
			{
				name:'丹尼',
				subject:'JavaScript',
				score:96
			},{
				name:'艾米丽',
				subject:'JavaScript',
				score:99
			},{
				name:'苏西',
				subject:'JavaScript',
				score:96
			}];
			
			//2.往tbody里面创建行，有几个人我们就创建几行（通过数组的长度）
			var tbody = document.querySelector('tbody');
			for(var i = 0;i < datas.length;i++){//外面的for循环管行 tr
			// 1.创建tr行
				var tr = document.createElement('tr');
				tbody.appendChild(tr);
				// 行里面创建单元格（跟数据有关系的3个单元格）td单元格的数量取决于每个对象里面的属性个数，for循环遍历对象 datas[i]
				for(var k in datas[i]){//里面的for循环管列 td
					var td = document.createElement('td');//创建单元格td
					// 把对象里面的属性值给td
					// console.log(datas[i][k]);
					td.innerHTML = datas[i][k];
					tr.appendChild(td);
				}
				// 创建有删除的单元格
				var td = document.createElement('td');
				td.innerHTML =  '<a href = "javascript:;">删除</a>';
				tr.appendChild(td);
				}
					// 注册删除事件
				var as = document.querySelectorAll('a');
				var tr = document.qs
				for(var i = 0;i < as.length;i++){
					as[i].onclick = function(){//点击a 删除a当前所在的行(a的爷爷) node.removeChild(child)
						// console.log(this.parentNode);
						tbody.removeChild(this.parentNode.parentNode);
				}
			}

			// for(var k in obj){
			// 	k得到的是属性名
			// 	obj[k]得到是属性值
			// }