动态删除和添加表格
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
width: 400px;
margin: 30px;
text-align: center;
font-size: 20px;
margin: 0 auto;
}
td,th{
width: 100px;
height: 50px;
}
tbody tr:nth-child(odd){
background-color: #e67e22;
}
tbody tr:nth-child(even){
background-color: #e74c3c;
}
thead tr{
background-color: #34495e;
color: #fff;
}
form{
width: 400px;
margin: 30px auto;
text-align: center;
padding: 30px;
border: 10px solid skyblue;
}
form input{
margin: 10px;
height: 30px;
width: 240px;
}
form>button{
width: 100%;
height: 40px;
margin-top: 20px;
font-size: 24px;
}
.del{
cursor: pointer;
}
</style>
</head>
<body>
<form>
名称:<input type="text" name="heroName"><br>
称号:<input type="text" name="nickName"><br>
位置:<input type="text" name="pos"><br>
<button id="btn" type="button">提交</button>
</form>
<table cellspacing = "0">
<thead>
<tr>
<th>名称</th>
<th>称号</th>
<th>位置</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>
<button class="del">删除</button>
</td>
</tr> -->
</tbody>
</table>
<script>
// 1.获取等下要用到的元素节点
var heroName = document.getElementsByName("heroName")[0];
var nickName = document.getElementsByName("nickName")[0];
var pos = document.getElementsByName("pos")[0];
var tbody = document.getElementsByTagName("tbody")[0];
// 获取提交按钮,为它绑定点击事件,点击的时候要获取用户输入的信息。
var btn = document.getElementById("btn");
btn.onclick = function(){
// 阻止浏览器默认事件 比如:表单会自动提交。
// ev.preventDefault();
// 添加非空验证
if(heroName.value.length==0||nickName.value.length==0||pos.value.length==0){
alert("请完整输入信息!")
return;
}
// 要往td中添加的内容
var arr = [heroName.value,nickName.value,pos.value]
// 创建一个tr 单元行
var tr = document.createElement("tr");
// 补充单元行的内容
//内容有多少个,就创建多少个td
for (var i = 0; i < arr.length; i++) {
// 创建一个td
var td = document.createElement("td");
td.innerHTML = arr[i]
tr.appendChild(td);
}
// 创建一个带删除按钮的单元格
var delTd = document.createElement("td");
// 创建一个按钮
var del = document.createElement("button");
// 填充按钮的内容
del.innerHTML = "删除";
// 给按钮添加一个类名
del.classList.add("del");
delTd.appendChild(del);
tr.appendChild(delTd);
// 把单元行插入到tbody中
tbody.appendChild(tr);
// 给按钮添加一个点击事件。
del.onclick = function(){
// 在事件函数中,this指向事件源,在点击事件中。点击了谁,this就是谁。
this.parentNode.parentNode.remove();
}
// 清空form中的input内容
heroName.value = "";
nickName.value = "";
pos.value = "";
}
</script>
</body>
</html>
效果图如下: