erido
/
tab.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;
			}
		</style>
	</head>
	<body>
		<table border="1" id="table">
			<tr>
				<th width="200">
					序号
				</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>
							<button onclick="addRow()">添加</button>
							</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()
					}
				}

			}

		}
	function addRow(){
       var tab = document.getElementById('table');
      var rowIndex = table.rows.length+1;


        var tr  = table.insertRow();
        tr.onclick=function (){this.className="onClickChangeStyle(this)";}

        var td1 = tr.insertCell();
        var td2 = tr.insertCell();
        var td3 = tr.insertCell();
        var td4 = tr.insertCell();
        var td5 = tr.insertCell();
        var td6 = tr.insertCell();
        var td7 = tr.insertCell();

        td1.innerHTML = "22";
        td2.innerHTML = "22";
        td3.innerHTML = "测试";
        td4.innerHTML = "22";
         td5.innerHTML = "<input type='button' value='删除' onclick='del(this)' />"
        td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";

        initRows(tab);
}
	function del(p){
           p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
            }
	</script>

</html>