<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>表格增删</title>
<style>
.panel{
width: 760px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
margin: 10px auto;
}
.panel>label{
margin-right: 10px;
}
.panel input{
font-size: 14px;
color: #444;
padding: 5px;
}
.panel input[type=text]{
width: 100px;
}
.list{
width: 800px;
border: 1px solid #ddd;
margin: 10px auto;
}
.list table{
width: 800px;
border-collapse: collapse;
border: 1px solid #ccc;
font-size: 14px;
font-family: 'Microsoft YaHei';
line-height: 14px;
color: #444;
}
.list thead{
background-color: #369;
color: #fff;
font-weight: bold;
font-size: 16px;
}
.list th , .list td{
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.list tbody a{
color: #369;
text-decoration: none;
}
</style>
<script>
function $id(id){
return document.getElementById(id);
}
window.onload = function(){
$id('add').onclick = function(){
//1.获取用户输入的数据
var sId = $id('serNo').value;
var sName = $id('stuName').value;
var sNo = $id('stuNo').value;
var sGender = $id('nan').checked ? '男' : '女';
// console.log(sGender);
var del = '<a href="#">删除</a>';
var tbody = document.getElementsByClassName('list')[0].getElementsByTagName('tbody')[0];
var newTr = document.createElement('tr');
//拼写tr内的所有td标签
var trInnerHtml = '<td>' + sId + '</td>';
trInnerHtml += '<td>' + sName + '</td>';
trInnerHtml += '<td>' + sNo + '</td>';
trInnerHtml += '<td>' + sGender + '</td>';
trInnerHtml += '<td>' + del + '</td>';
newTr.innerHTML = trInnerHtml;
//给newTr里的删除a标签，注册onclick事件
var delLink = newTr.getElementsByTagName('a')[0];
delLink.onclick = function(){
var tr = this.parentNode.parentNode;
var tbody = tr.parentNode;
tbody.removeChild(tr);
}
//把tr插入到tbody内部
tbody.append(newTr);
}
//2.注册删除事件
var dels = document.getElementsByClassName('list')[0].getElementsByTagName('a');
for (var i = 0; i < dels.length; i++) {
dels[i].onclick = function(){
var tr = this.parentNode.parentNode;
var tbody = tr.parentNode;
tbody.removeChild(tr);
}
}
}
</script>
</head>
<body>
<div class="panel">
<label for="">序号：<input type="text" id="serNo"></label>
<label for="">姓名：<input type="text" id="stuName"></label>
<label for="">学号：<input type="text" id="stuNo"></label>
<label for="">性别：
<label for="nan">男:<input type="radio" name="gender" value="nan" id="nan" checked="checked"></label></label>
<label for="nv">女:<input type="radio" name="gender" value="nv" id="nv"></label>
</label>
<input type="button" id="add" value=" 添 加 ">
</div>
<div class="list">
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>徐有庆</td>
<td>160985147</td>
<td>男</td>
<td><a href="#">删除</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>