前端表格的增改删——原生JS

前端表格的增改删

css文件：

*{
	margin: 0;
	padding: 0;
}
.form{
	margin: 0 auto;
	width: 1200px;
	height: 390px;
	position: relative;
}
.name{
	position: absolute;
	left: 250px;
	top: 70px;
	font-size: 20px;
}
.name>input{
	width: 325px;
	height: 55px;
}
.age{
	position: absolute;
	left: 250px;
	top: 140px;
	font-size: 20px;
}
.age>input{
	width: 325px;
	height: 55px;
}
.sex{
	position: absolute;
	left: 250px;
	top: 210px;
	font-size: 20px;
}
.sex>select{
	position: relative;
	left: -6px;
}
.chuangj{
	width: 90px;
	height: 52px;
	color: white;
	background-color: rgb(0,154,97);
	position: absolute;
	left: 308px;
	top: 270px;
	border-radius: 10%;
	font-size: 25px;
	text-align: center;
}
.biaoge{
	width: 1202px;
	margin: -1px auto;
}
.onetr{
	height: 50px;
	background-color: rgb(0,154,97);
	text-align: center;
	color: white;
	font-weight: 500;
}
.twotr{
	height: 75px;
    color: black;
	text-align: center;
}
.xiugai{
	width: 90px;
	height: 52px;
	color: white;
	background-color: rgb(0,154,97);
	border-radius: 10%;
	font-size: 25px;
	text-align: center;
}
.shanchu{
	width: 90px;
	height: 52px;
	color: white;
	background-color: rgb(0,154,97);
	border-radius: 10%;
	font-size: 25px;
	text-align: center;
}
.shadow{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: rgba(128,128,128,0.2);
	display: flex;
	justify-content: center;
	align-items: center;
}
.xgbox{
	width: 55%;
	height: 60%;
	background-color: white;
	position: fixed;
	left: 22.5%;
	top: 20%;
}
.xgbox>p{
	position: relative;
	font-size: 25px;
	top: 20px;
	left: 20px;
}
.xgname{
	position: relative;
	left: 150px;
	top: 70px;
	font-size: 20px;
}
.xgname>input{
	width: 730px;
	height: 70px;
}
.xgage{
	position: relative;
	left: 150px;
	top: 140px;
	font-size: 20px;
}
.xgage>input{
	width: 730px;
	height: 70px;
}
.xgsex{
	position: relative;
	left: 150px;
	top: 210px;
	font-size: 20px;
}
.xgsex>select{
	position: relative;
	left: -6px;
}
.xgbox>span{
	position: absolute;
	font-size: 30px;
	right: 2px;
	top: -10px;
}
.queding{
	width: 130px;
	height: 70px;
	color: skyblue;
	border: 1px solid skyblue;
	border-radius: 10%;
	font-size: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 150px;
	bottom: 50px;
}
.quixiao{
	width: 130px;
	height: 70px;
	color: skyblue;
	border: 1px solid skyblue;
	border-radius: 10%;
	font-size: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 750px;
	bottom: 50px;
}

js文件：

var sex = document.getElementsByClassName("sex")[0].getElementsByTagName("select")[0];
var chuangj = document.getElementsByClassName("chuangj")[0];
// sex.onchange=function(){
// console.log(sex.value)
// } 
// sex.value=0（男）或者1(女)

var father = document.getElementsByClassName("father")[0];
chuangj.onclick = function() {
	var name = document.getElementById("name").value;
	var age = document.getElementById("age").value;
	var sex = document.getElementsByClassName("sex")[0].getElementsByTagName("select")[0].value;
	var newtr = document.createElement("tr");
	var shadow = document.getElementsByClassName("shadow")[0];
	var cha = document.getElementsByClassName("xgbox")[0].getElementsByTagName("span")[0];
	var quxiao = document.getElementsByClassName("quixiao")[0];
	var queding = document.getElementsByClassName("queding")[0];
	var regK=/\D/g
	if(name==""){
		alert("请在修改栏加入姓名")
	}
	if(age==""){
		alert("请从修改栏加入年龄")
	}
	if(regK.test(age)){
		alert("请在年龄栏输入正确的数字")
	}
	cha.onclick = function() {
		shadow.style.display = "none";
	}
	quxiao.onclick = function() {
		shadow.style.display = "none";
	}
	shadow.style.height = "100vw";
	
	newtr.className = "twotr";
	father.appendChild(newtr);
	var newtd1 = document.createElement("td");
	newtd1.innerText = name;
	newtr.appendChild(newtd1);

	var newtd2 = document.createElement("td");
	newtd2.innerText = age;
	newtr.appendChild(newtd2);

	var newtd3 = document.createElement("td");
	if (sex == 0) {
		newtd3.innerText = "男";
	} else {
		newtd3.innerText = "女";
	}
	newtr.appendChild(newtd3);

	var newtd4 = document.createElement("td");
	var newinput1 = document.createElement("input");
	var newinput2 = document.createElement("input");
	newinput1.className = "xiugai";
	newinput1.value = "修改"
	newtd4.appendChild(newinput1);
	newinput2.className = "shanchu";
	newinput2.value = "删除"
	newtd4.appendChild(newinput2);
	newtr.appendChild(newtd4);
	// console.log(xiugai.length)
	var list = document.getElementsByClassName("father")[0].getElementsByTagName("tr");
	var xiugai = document.getElementsByClassName("xiugai");
	var shanchu = document.getElementsByClassName("shanchu");
	for (let i = 0; i < shanchu.length; i++) {
		shanchu[i].onclick = function() {
			// console.log(this.parentNode);
			this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
		}
	}

	for (let i = 0; i < xiugai.length; i++) {
		xiugai[i].onclick = function() {
			var xgname = document.getElementById("xgname");
			var xgage=document.getElementById("xgage");
			var xgsex=document.getElementById("xgsex");
			shadow.style.display = "block";
			// console.log(this.parentNode.parentNode.children[0].innerHTML);
			// console.log(xgname);
			xgname.value=this.parentNode.parentNode.children[0].innerHTML
			xgage.value=this.parentNode.parentNode.children[1].innerHTML
			xgsex.value=this.parentNode.parentNode.children[2].innerHTML
		queding.onclick=function(){
			xiugai[i].parentNode.parentNode.children[0].innerText=xgname.value;
			xiugai[i].parentNode.parentNode.children[1].innerText=xgage.value;
			xiugai[i].parentNode.parentNode.children[2].innerText=xgsex.value;
			shadow.style.display = "none";
		}
	}}
}

html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jiedian</title>
		<link rel="stylesheet" type="text/css" href="css/jiedian.css" />
	</head>
	<body>
		<div class="shadow" style="display: none;">
			<div class="xgbox">
				<p>修改</p>
				<span>x</span>
				<div class="xgname">
					姓名：<input type="text" id="xgname" placeholder="请输入姓名" />
				</div>
				<div class="xgage">
					年龄：<input type="text" id="xgage" placeholder="请输入年龄" />
				</div>
				<div class="xgsex">
					<label>性别：</label>
					<select  id="xgsex" style="width: 50px;height: 45px;font-size: 22px;">
						<option>男</option>
						<option>女</option>
					</select>
				</div>
				<div class="queding">
					确认
				</div>
				<div class="quixiao">
					取消
				</div>
			</div>
		</div>
		<div>
			<form>
				<fieldset class="form">
					<legend>创建类目</legend>
					<div class="name">
						姓名：<input type="text" id="name" placeholder="请输入姓名" />
					</div>
					<div class="age">
						年龄：<input type="text" id="age" placeholder="请输入年龄" />
					</div>
					<div class="sex">
						<label>性别：</label>
						<select style="width: 50px;height: 45px;font-size: 22px;">
							<option value="0">男</option>
							<option value="1">女</option>
						</select>
					</div>
					<input type="text" class="chuangj" value="创建" />
				</fieldset>
			</form>
		</div>
		<div class="biaoge">
			<table border="2px soild gray" style="border-collapse: collapse;">
				<tbody class="father">
				<tr class="onetr">
					<td width="220">姓名</td>
					<td width="220">年龄</td>
					<td width="220">性别</td>
					<td width="540">删除</td>
				</tr>
				</tbody>
			</table>
		</div>
		
		<script type="text/javascript"src="js/jiedian.js"></script>
	</body>
</html>