1.图片
2.HTML代码
<body>
<table border="1" id="tab">
<tr>
<th >name</th>
<th>age</th>
<th>job</th>
</tr>
<tr>
<td >Jack</td>
<td>30</td>
<td>软件测试</td>
<td><a href="1">删除</a></td>
</tr>
<tr>
<td >Jerry</td>
<td>35</td>
<td>前端开发</td>
<td><a href="2">删除</a></td>
</tr>
</table>
<br/>
<table border="1"id="tb2">
<tr>
<th>添加用户</th>
</tr>
<tr>
<td>name:<input type="text" id="name"></td>
</tr>
<tr>
<td >age: <input type="text" id="age"></td>
</tr>
<tr>
<td>job: <input type="text" id="job"></td>
</tr>
<tr>
<td><button id="addBtn">submit</button></td>
</tr>
</table>
</body>
3.CSS
<style type="text/css">
table{
text-align: center;
width: 300px;
height: 100px;
border-style: solid black;
background-color:#00ff99;
}
</style>
4.JS代码
<script type="text/javascript">
window.function(){
//删除tr的响应函数
function delA(){
//点击超链接以后需要删除超链接所在的那行
//这里点击哪个超链接this就是谁
//获取当前的tr
var tr=this.parentNode.parentNode;
//获取要删除的员工的名字
//var name=tr.getElementsByTagName("td")[0].innerHTML;
var name=tr.children[0].innerHTML;
//删除之前弹出一个提示框
/*
confirm()用于弹出一个带有确认取消的提示框
需要一个字符串作为参数,该字符串将会作为提示文字显示出来
如果用户点击确认则会返回true,如果点击取消则返回false
*/
var flag=confirm("确认删除"+name+"吗");
if(flag){
//删除tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后,超链接会跳转页面,这个是超链接的默认行为
此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消
*/
return false;//或者在a标签处<a href="javascript:;"></a>
}
/*
点击超链接以后,删除一个员工的信息
*/
//获取所有的超链接
var allA=document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for(var i=0;i<allA.length;i++){
allA[i].delA;
}
/*
添加员工的功能
点击按钮以后,将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
var addBtn=document.getElementById("addBtn");
addBtn.function(){
//获取用户填写的信息
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var job=document.getElementById("job").value;
/*
<tr>
<td>name1</td>
<td>1</td>
<td>job1</td>
<td><a href="1">删除</a></td>
</tr>
将需要获取到的信心保存在tr中
*/
//创建一个tr
var tr=document.createElement("tr");
//创建四个td
var nameTd=document.createElement("td");
var ageTd=document.createElement("td");
var jobTd=document.createElement("td");
var aTd=document.createElement("td");
//创建一个a元素
var a=document.createElement("a");
//创建文本节点
var nameTxt=document.createTextNode(name);
var ageTxt=document.createTextNode(age);
var jobTxt=document.createTextNode(job);
var delTxt=document.createTextNode("删除");
//将文本添加到td
nameTd.appendChild(nameTxt);
ageTd.appendChild(ageTxt);
jobTd.appendChild(jobTxt);
//向a中添加href属性
a.href="javascript:;";
//向a中添加文本
a.appendChild(delTxt);
//将a添加到td中
aTd.appendChild(a);
//将td添加到tr中
tr.appendChild(nameTd);
tr.appendChild(ageTd);
tr.appendChild(jobTd);
tr.appendChild(aTd);
//获取table
var tab=document.getElementById("tab");
//获取tab中的tbody
var tbody=tab.getElementsByTagName("tbody")[0];
//将tr添加到tbody中
tbody.appendChild(tr)
//为新添加的a再绑定一次响应函数
a.delA;
};
};
</script>
4.简化版
//删除tr的响应函数
function delA(){
//点击超链接以后需要删除超链接所在的那行
//这里点击哪个超链接this就是谁
//获取当前的tr
var tr=this.parentNode.parentNode;
//获取要删除的员工的名字
//var name=tr.getElementsByTagName("td")[0].innerHTML;
var name=tr.children[0].innerHTML;
//删除之前弹出一个提示框
/*
confirm()用于弹出一个带有确认取消的提示框
需要一个字符串作为参数,该字符串将会作为提示文字显示出来
如果用户点击确认则会返回true,如果点击取消则返回false
*/
var flag=confirm("确认删除"+name+"吗");
if(flag){
//删除tr
tr.parentNode.removeChild(tr);
}
/*
点击超链接以后,超链接会跳转页面,这个是超链接的默认行为
此时我们不希望出现默认行为,可以通过在响应函数的最后return false来取消
*/
return false;//或者在a标签处<a href="javascript:;"></a>
}
window.function(){
/*
点击超链接以后,删除一个员工的信息
*/
//获取所有的超链接
var allA=document.getElementsByTagName("a");
//为每个超链接都绑定一个单击响应函数
for(var i=0;i<allA.length;i++){
allA[i].delA;
}
/*
添加员工的功能
点击按钮以后,将员工的信息添加到表格中
*/
//为提交按钮绑定一个单击响应函数
var addBtn=document.getElementById("addBtn");
addBtn.function(){
//获取用户填写的信息
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var job=document.getElementById("job").value;
/*
<tr>
<td>name1</td>
<td>1</td>
<td>job1</td>
<td><a href="1">删除</a></td>
</tr>
将需要获取到的信心保存在tr中
*/
//创建一个tr
var tr=document.createElement("tr");
//设置tr中的内容
tr.innerHTML="<td>"+name+"</td>"+
"<td>"+age+"</td>"+
"<td>"+job+"</td>"+
"<td><a href='javascript:;'>删除</a></td>";
//获取刚刚添加的a元素,并为其绑定单击响应函数
var a=tr.getElementsByTagName("a")[0];
a.delA;
//获取table
var tab=document.getElementById("tab");
//获取tab中的tbody
var tbody=tab.getElementsByTagName("tbody")[0];
//将tr添加到tbody中
tbody.appendChild(tr)
/* tbody.innerHTML+="<tr>"+"<td>"+name+"</td>"+
"<td>"+age+"</td>"+
"<td>"+job+"</td>"+
"<td><a href='javascript:;'>删除</a></td>"
+"</tr>"; */
//为新添加的a再绑定一次响应函数
a.delA;
};
};