<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.5.0.js"></script>
<style>
div{
border:solid 1px;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 200px;
}
table#table01{
margin-left: auto;
margin-right: auto;
border: solid 1px;
border-collapse: collapse;
text-align: center;
width:400px;
}
table#table01 th,table#table01 td{
border: 1px solid;
}
#formTable{
text-align: center;
}
</style>
<script>
//删除信息
function deleteEmp() {
var $trObj = $(this).parent().parent();
var name = $trObj.find("td:first").text();
if (confirm("确定要删除["+name+"]吗?")) {
$trObj.remove();
}
return false;
}
//添加信息
$(function() {
$("#submit").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var salary = $("#salary").val();
var $trObj = $("<tr>" +
"<td>"+name+"</td>" +
"<td>"+email+"</td>" +
"<td>"+salary+"</td>\n" +
"<td><a href=\"deleteEmp?id=001\">Delete</a></td>" +
"</tr>");
$trObj.appendTo($("#table01"));
$trObj.find("a").click(deleteEmp);
});
$("a").click(deleteEmp);
});
</script>
</head>
<body>
<table id="table01">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
</table><br/>
<div>
<h3>添加新员工</h3>
<table id="formTable" align="center">
<tr>
<td>name:</td>
<td><input type="text" id="name"/></td>
</tr>
<tr>
<td>email:</td>
<td><input type="email" id="email"/></td>
</tr>
<tr>
<td>salary:</td>
<td><input type="number" id="salary"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="submit"/></td>
</tr>
</table>
</div>
</body>
</html>
简单的表格动态添加、删除(无验证)
最新推荐文章于 2022-11-14 15:29:15 发布