master

分支 (1)

管理

管理

master

appcc
/
table.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>
				<td width="200" id="a">
					序号
				</td>
				<td id="b">
					姓名
				</td>
				<td id="c">
					班级
				</td>
				<td id="d">
					专业
				</td>
				<td id="e">
					操作栏
				</td>

                <td align="center" colspan="5">
                <br />
                    <input type="button" name="insert"  value="增加一行" style="width:80px" onclick="insertNewRow()" />
                </td>

				</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>
						</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 insertNewRow() {
       		var tab = document.getElementById("table");
       		var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            var td5 = document.createElement("td");

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tr.appendChild(td5);

            tab.appendChild(tr);
            td5.innerHTML = "<input type='button' value='删除' onclick='del(this)' />"

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

</html>