使用DOM方法实现表格的增删改查

最新推荐文章于 2021-03-19 11:03:47 发布

发际线就是实力

最新推荐文章于 2021-03-19 11:03:47 发布

阅读量967

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/Cheris_LT/article/details/106196113

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				margin-top: 150px;
				border-collapse: collapse;
			}

			th {
				background-color: #eee;
				width: 100px;
				height: 30px;
			}

			td {
				height: 30px;
			}
		</style>
	</head>
	<body>
		姓名：<input type="text" /><br>
		性别：<input type="text" /><br>
		学号：<input type="text" /><br>
		年龄：<input type="text" /><br>
		<button type="button" onclick="add()">创建</button>
		<button type="button" onclick="reset()">重置</button>

		<table border="" cellspacing="" cellpadding="">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>学号</th>
				<th>年龄</th>
				<th>操作</th>
			</tr>
		</table>
		<script type="text/javascript">
			let myinp = document.querySelectorAll("input")
			let mytab = document.querySelector("table")


			function reset() {
				for (let i = 0; i < myinp.length; i++) {
					myinp[i].value = ""
				}
			}

			function add() {
				let change = true
				let chabtn = document.createElement("input")
				chabtn.setAttribute("type", "button")
				chabtn.setAttribute("value", "修改")

				let delbtn = document.createElement("input")
				delbtn.setAttribute("type", "button")
				delbtn.setAttribute("value", "删除")

				let newtr = document.createElement("tr")
				let newtd1 = document.createElement("td")
				newtd1.innerHTML = myinp[0].value
				let newtd2 = document.createElement("td")
				newtd2.innerHTML = myinp[1].value
				let newtd3 = document.createElement("td")
				newtd3.innerHTML = myinp[2].value
				let newtd4 = document.createElement("td")
				newtd4.innerHTML = myinp[3].value
				let newtd5 = document.createElement("td")


				newtd5.appendChild(chabtn)
				newtd5.appendChild(delbtn)
				newtr.appendChild(newtd1)
				newtr.appendChild(newtd2)
				newtr.appendChild(newtd3)
				newtr.appendChild(newtd4)
				newtr.appendChild(newtd5)
				mytab.appendChild(newtr)

				delbtn.onclick = function() {
					this.parentNode.parentNode.remove()
				}

				chabtn.onclick = function() {
					if (change) {
						for (let i = 0; i < this.parentNode.parentNode.children.length - 1; i++) {
							this.parentNode.parentNode.children[i].innerHTML =
								`<input type="text" value="${this.parentNode.parentNode.children[i].innerHTML}"></input>`
						}
						chabtn.value = "保存"
						change = false
					} else {
						for (let i = 0; i < this.parentNode.parentNode.children.length - 1; i++) {
							this.parentNode.parentNode.children[i].innerHTML = this.parentNode.parentNode.children[i].children[0].value
						}
						chabtn.value = "修改"
						change = true
					}
				}
			}
		</script>
	</body>
</html>