动态生成表格案例（添加版）

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table {

width: 500px;

margin: 50px auto;

border-collapse: collapse;

text-align: center;

}

td,

th {

border: 1px solid #333;

}

thead tr {

height: 40px;

background-color: #ccc;

}

a {

text-decoration: none;

color: #666;

}

#userInfo {

width: 200px;

margin: 50px auto;

}

</style>

</head>

<body>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

学生姓名:<input type="text" name="" id="name"><br />

学生科目:<input type="text" name="" id="subject"><br />

学生分数:<input type="text" name="" id="score"><br />

</div>

// 0. 学生信息一个数组包含多个对象的格式

var studentsArr = [

{

"name": "李宝",

"subject": "javascript",

"score": 98

{

"name": "陈宝",

"subject": "php",

"score": 96

{

"name": "米宝",

"subject": "c++",

"score": 94

}

]

var tbody = document.querySelector('tbody')

// 1. 创建行 => 行数是根据对象的个数来决定的

print(studentsArr)

// 为添加按钮绑定点击事件

var add = document.querySelector('#add')

add.onclick = function () {

// 获取到三个input框的输入内容

var name = document.querySelector('#name').value

var subject = document.querySelector('#subject').value

var score = document.querySelector('#score').value

// 组成一个对象放到数组中

var obj = {

name: name,

subject: subject,

score: score

}

var arr = []

arr.push(obj)

// 还需要重新渲染数据

print(arr)

// es6写法 => studentsArr.push({name,subject,score})

}

// 专门用来渲染的函数

// 参数: 需要渲染的对象

// 返回值: 没有

function print(arr) {

// 证明是通过点击添加按钮触发的渲染

if (arr.length == 1) {

for (var i = 0; i < 1; i++) {

var tr = document.createElement('tr')

tbody.appendChild(tr)

for (var key in arr[i]) {

var td = document.createElement('td')

td.innerHTML = arr[i][key]

tr.appendChild(td)

}

// 添加删除

var del = document.createElement('td')

del.innerHTML = '<a href="javascript:;">删除</a>'

tr.appendChild(del)

}

// 为删除绑定事件

var as = document.querySelectorAll('a')

for (var i = 0; i < as.length; i++) {

as[i].onclick = function () {

tbody.removeChild(this.parentNode.parentNode)

}

} else {

for (var i = 0; i < arr.length; i++) {