<!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>Document</title>
<style>
table {
width: 500px;
margin: 50px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
a {
text-decoration: none;
color: #666;
}
#userInfo {
width: 200px;
margin: 50px auto;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="userInfo">
学生姓名:<input type="text" name="" id="name" value=""><br />
学生科目:<input type="text" name="" id="subject" value=""><br />
学生分数:<input type="text" name="" id="score" value=""><br />
<button id="add">添加</button>
</div>
</body>
<script type="text/javascript">
var datas=[{
name:"甲",
subject:"javascript",
score:100
},{
name:"乙",
subject:"javascirpt",
score:99
},{
name:"丙",
subject:"javascript",
score:98
},{
name:"丁",
subject:"javascript",
score:98
},{
name:"酋",
subject:"javascript",
score:98
}];
var tbody=document.querySelector("tbody"); //获取tbody标签
for(var i=0;i<datas.length;i++){ //for遍历数组datas
var tr=document.createElement("tr"); // 创建tr标签
tbody.appendChild(tr); // 添加tr节点标签
for(var k in datas[i]){ // for in 分别取出里面的值
var td=document.createElement("td"); //创建td标签
tr.appendChild(td); // tr内创建td节点 标签
td.innerHTML=datas[i][k]; // 数组遍历出的分别添加到td内
}
var tdd=document.createElement("td"); // 在创建td标签节点
tr.appendChild(tdd);
tdd.innerHTML="<a href=‘javascript:;‘>删除</a>" //td内添加a标签
}
var sc=document.querySelectorAll("a"); //获取所有a标签
for(var j=0;j<sc.length;j++){ //遍历出 a标签
sc[j].onclick=function(){ //为遍历出的a标签添加点击事件
tbody.removeChild(this.parentNode.parentNode); //点击删除当前a标签 父级的父级
}
}
var add=document.getElementById("add");
add.onclick=function(){
var nam=document.getElementById("name").value;
var subject=document.getElementById("subject").value;
var score=document.getElementById("score").value;
var obj = {
name:nam,
subject:subject,
score:score
}
var arr=[]; //创建空数组
arr.push(obj); //将字符串obj添加到数组内
for(var i=0;i<arr.length;i++){ //for循环遍历数组 创建tr
var tr=document.createElement("tr"); // 创建tr标签
tbody.appendChild(tr);
for(var m in arr[i]){
var td=document.createElement("td"); //创建td标签
tr.appendChild(td); // tr内创建td节点 标签
td.innerHTML=arr[i][m];
}
}
var tdd=document.createElement("td"); // 在创建td标签节点
tr.appendChild(tdd);
tdd.innerHTML="<a href=‘javascript:;‘>删除</a>" //td内添加a标签
var sc=document.querySelectorAll("a"); //获取所有a标签
for(var j=0;j<sc.length;j++){ //2遍历出 a标签
sc[j].onclick=function(){ //为遍历出的a标签添加点击事件
tbody.removeChild(this.parentNode.parentNode); //点击删除当前a标签 父级的父级
}
}
}
</script>
</html>