<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>员工管理</title>
<style>
* {
padding: 5px;
margin: 10px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
th {
color:rgb(210, 52, 224);
}
td {
color:rgb(26, 23, 219);
}
a {
color:red;
}
body {
background-color: aqua;
}
table {
background-color:rgb(107, 212, 216);
border-collapse: collapse;
position: absolute;
text-align: center;
width: 50%;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
}
table, th, td {
border: 1px solid black;
padding: 4px;
}
#addNewPerson {
background-color: lightblue;
position: absolute;
top: 80%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
width: 20%;
padding: 4px;
text-align: center;
border-radius: 14px;
}
input {
border: 1px solid black;
border-radius: 10px;
background-color: lightgreen;
}
input[type=button] {
background-color: rgb(218, 199, 30);
}
input[type=button]:hover {
background-color: rgb(30, 215, 40);
}
</style>
</head>
<body>
<table id="peopleMessagesTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>Delete</th>
</tr>
<tr>
<td>Person1</td>
<td>111@136.com</td>
<td>3000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>
<tr>
<td>Person2</td>
<td>222@136.com</td>
<td>5000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>
<tr>
<td>Person3</td>
<td>333@136.com</td>
<td>10000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>
</table>
<div id="addNewPerson">
<h1 style="color:rgb(69, 41, 226)">添加新员工</h1>
<input type="text" placeholder="Name" id="name" />
<br>
<input type="text" placeholder="Email" id="email" />
<br>
<input type="text" placeholder="Salary" id="salary" />
<br>
<input type="button" value="添加" style="width: 80px;" id="addPersonButton">
</div>
<script src="jquery-1.7.2/jquery1.7.2.js"></script>
<script>
$(function (){
//设置当按下按钮的事件
$('#addPersonButton').click(function (){
//1.获取数据
var $table = $('#peopleMessagesTable')
var $name = $('#name');
var $email = $('#email');
var $salary = $('#salary');
var name = $('#name').val();
var email = $('#email').val();
var salary = $('#salary').val();
//2.做好准备工作，添加到table后面
//tr实例
/* <tr>
<td>Person1</td>
<td>111@136.com</td>
<td>3000</td>
<td>
<a href="javascript:;">Delete</a>
</td>
</tr>*/
var $ele = $('<tr></tr>');
$ele.append('<td>' + name + '</td>');
$ele.append('<td>' + email + '</td>');
$ele.append('<td>' + salary + '</td>');
$ele.append('<td><a href="javascript:;">Delete</a></td>');
//插入
$table.append($ele);
$name.val('');
$email.val('');
$salary.val('');
$ele.find('a').click(Delete);
});
$(document).find('a').click(Delete);
function Delete (){
var $obj = $(this).parent().parent();
if(confirm('是否删除' + $obj.children(':first').html() + '?')){
$obj[0].remove();
}
}
})
</script>
</body>
</html>
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-7-27 09:16:28
置顶卡
千斤顶
显身卡