web-no4
/
No4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>

		<style type="text/css">
			.blue-txt {
				color: blue;
			}
			td {
				text-align: center;
				width: 250px;
			}
			.del {
				color: blue;
				cursor: pointer;
			}
            .add {
				color: blue;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<table border="1" id="table">
			<tr>
				<th width="200">
					序号
				</th>
				<th>
					姓名
				</th>
				<th>
					班级
				</th>
				<th>
					专业
				</th>
				<th>
					操作栏
				</th>
                <th>
					操作栏
				</th>
			</tr>
		</table>

	</body>

	<script type="text/javascript">
		window.onload = function() {
			// 数据源
			let obj = [{
				id: 1,
				name: '李四',
				className: '软件普通2班',
				subject: '软件技术'
			},{
				id: 2,
				name: '张三2',
				className: '软件普通2班2',
				subject: '软件技术'
			},{
				id: 3,
				name: '张三3',
				className: '软件普通2班3',
				subject: '软件技术'
			}]

			let oriHtml = document.getElementById('table').innerHTML

			draw()


			function draw() {
				// 当前table的html代码
				let strOri = oriHtml
				console.dir(strOri)
				for (let i = 0; i < obj.length; i++) {
					strOri += `
						<tr>
							<td>
								${i+1}
							</td>
							<td>
								${obj[i].name}
							</td>
							<td>
								${obj[i].className}
							</td>
							<td>
								${obj[i].subject}
							</td>
							<td>
								<span class="del" id="${obj[i].id}">
									删除
								</span>
							</td>
                            <td>
								<span class="add" id = "-${obj[i].id}">
									添加
								</span>
							</td>
						</tr>
					`
				}
				document.getElementById('table').innerHTML = strOri

				// 绑定点击事件
				for (let i = 0; i < obj.length; i++) {
					document.getElementById(obj[i].id).onclick = function() {
						console.log(obj[i].id)
						// 根据id删除对象数据 - 过滤出来数据
						let newData = []
						for (let j = 0; j < obj.length; j++) {
							if(obj[j].id !== obj[i].id) {
								newData.push(obj[j])
							}
						}
						obj = newData
						draw()
					}
				}

                for (let i = 0; i < obj.length; i++) {
                    document.getElementById(-obj[i].id).onclick = function() {
                        console.log(obj[i].id)
                        let newData = []
                        for (let j = 0; j < obj.length; j++) {
							newData.push(obj[j])
						}
                        newData.push({
                        id: obj.length + 1,
                        name: '',
                        className: '',
                        subject: ''
                        })
                        obj = newData
                        draw()
                    }

                }
			}

		}
	</script>

</html>