学习使用jQuery每日练习
实现动态添加和删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
//创建一个用于复用的删除的function函数
var deleteFun = function(){
// 在事件响应的function函数中,有一个this对象,这个this对象就是当前正在响应事件的dom对象
// alert(this);
var $strObj = $(this).parent().parent();
var empname = $strObj.find("td:first").text(); //获取要删除事件的名字
/*
* confirm是JavaScript语言提供的一个确认提示框函数,你给他传什么,它就提示什么
* 当用户点击了确定,就返回true,当用户点击取消,则返回false
* */
if(confirm("你确定删除"+ empname +"的信息吗?")){
// 行对象.remove();
$strObj.remove();
}
return false; //阻止元素默认行为 默认不跳转
};
//给submit按钮绑定单击事件
$("#addEmpButton").click(function(){
//获取输入框,姓名,邮箱,工资的内容
var name = $("#empName").val();
var email = $("#empEmail").val();
var salary = $("#empSalary").val();
//创建添加一个行标签对象,添加到显示数据的表格中
$trObj=$("<tr>" +
"<td>"+ name +"</td>" +
"<td>"+ email +"</td>" +
"<td>"+ salary +"</td>" +
"<td><a href=\"deleteEmap?id=003\">Delete</a></td>" +
"</tr>");
$trObj.appendTo($("#employeeTable")); //将行标签数据插入表格末端
// 给创建添加的行的a标签绑定事件
$trObj.find("a").click(deleteFun );
});
// alert($("a").length);
//给要删除的行的a标签绑定单击事件
$("a").click( deleteFun ); //$("a").click(function(){})>>当前this响应的函数deleteFun ,
});
</script>
</head>
<body>
<table id="employeeTable" border="1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>Tom@tom.com</td>
<td>3000</td>
<td><a href="deleteEmap?id=001">Delete</a></td>
</tr>
<tr>
<td>Barry</td>
<td>Barry@barry.com</td>
<td>5000</td>
<td><a href="deleteEmap?id=002">Delete</a></td>
</tr>
<tr>
<td>Tony</td>
<td>Tony@tony.com</td>
<td>7000</td>
<td><a href="deleteEmap?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv" >
<h4>添加新员工</h4>
<table border="1">
<tr>
<td>name:</td>
<td><input type="text" name="empName" id="empName"/></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="empEmail" id="empEmail"/></td>
</tr>
<tr>
<td>Salary:</td>
<td><input type="text" name="empSalary" id="empSalary"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" id="addEmpButton" value="abc">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
1.运行界面
1.删除![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/701f6db0ee185e87c29ada54422fc318.png#pic_center)
2.添加