<!DOCTYPE html>
<html>
<head>
<title>节点添加与删除练习</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div {
text-align: center;
background-color: #c0c0c0;
width: 65%;
height: 65%;
}
</style>
<script type="text/javascript">
//要求:动态向table中添加信息，并可以删除
window.onload = function() {
/*
当点击按钮时，将信息得到，并手动封装成字符串
"<tr><td>username</td><td>email</td><td>telephone</td><td><a href=‘#‘ onclick=‘delRow(this)‘>Delete</a></td></tr>"
得到id为tab的table，合适innerHTML+=上面的字符串.
问题:当点击超链接时，怎样删除当前行.
当超链接被点击时，调用一个delRow方法，将this传递到delRow方法中.
在delRow方法中可以通过 parentNode.parentNode得到最终要删除的tr。
在通过table调用removeChild方法将这一行删除。
*/
document.getElementById("btn").onclick=function(){
//1.得到信息.
var username=document.getElementById("username").value;
var email=document.getElementById("email").value;
var telephone=document.getElementById("telephone").value;
//2.拼出字符串.
var msg="<tr><td>"+username+"</td><td>"+email+"</td><td>"+telephone+"</td><td><a href=‘#‘ onclick=‘delRow(this)‘>Delete</a></td></tr>"
//3.将msg添加到table中.
document.getElementById("tab").innerHTML+=msg;
document.getElementById("username").value="";
document.getElementById("email").value="";
document.getElementById("telephone").value="";
}
};
function delRow(t){
document.getElementById("tab").removeChild(t.parentNode.parentNode.parentNode);
//t.parentNode.parentNode.parentNode.removeChild(t.parentNode.parentNode);
}
</script>
</head>
<body>
<div>
<br> <br> 姓名: <input type="text" id="username">
EMAIL: <input type="text" id="email"> 电话: <input type="text"
id="telephone"> <br> <br> <input type="button"
value="添加" id="btn">
<hr>
<table id="tab" border=‘1‘ align="center" width="85%">
<tr>
<th>姓名</th>
<th>EMAIL</th>
<th>电话</th>
<th>操作</th>
</tr>
</table>
</div>
</body>
</html>
时间： 2024-08-04 11:53:03