<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#userTable{
border: 1px solid black;
}
tr,td{
border: 1px solid black;
margin: 0px;
}
</style>
</head>
<body>
姓名:
<input type="text" name="name" id="name">   电话:
<input type="text" name="del" id="del">   年龄:
<input type="text" name="age" id="age">
</br>
</br>
<input type="button" onclick="add()" value="添加">
<table id="userTable">
<tr>
<td>姓名</td>
<td>电话</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr>
<td>李钟硕</td>
<td>18341893451</td>
<td>28</td>
<td><a href="javascript:void(0)" onclick="del(this)">delete</a></td>
</tr>
<tr>
<td>高俊熙</td>
<td>18341895832</td>
<td>26</td>
<td><a href="javascript:void(0)" onclick="del(this)">delete</a></td>
</tr>
</table>
</body>
<script type="text/javascript">
function add() {
var name = document.getElementById("name").value;
var del = document.getElementById("del").value;
var age = document.getElementById("age").value;
var tr = document.createElement("tr");
tr.innerHTML = "<td>"
+ name
+ "</td><td>"
+ del
+ "</td><td>"
+ age
+ "</td><td><a href='javascript:void(0)' onclick='del(this)'>delete</a></td>";
document.getElementById("userTable").appendChild(tr);
}
function del(a) {
a.parentNode.parentNode.parentNode.removeChild(a.parentNode.parentNode);
}
</script>
</html>
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步