先学习下confirm函数：
confirm 是JavaScript语言提供的一个确认提示框函数。
你给它传什么，它就提示什么，当用户点击了确定，就返回true。当用户点击了取消，就返回false。
confirm("我是陆亿行-2021-02-01");
实现的界面如下所示：
1. 初始化代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-01-31</title>
<style type="text/css">
th, td {
background-color: white;
}
#employeeTable {
border-spacing: 1px;
background-color: black;
margin: 80px auto 10px auto;
}
#formDiv {
width: 250px;
border-style: solid;
border-width: 1px;
margin: 50px auto 10px auto;
padding: 10px;
}
#formDiv input {
width: 100%;
}
.word {
width: 40px;
}
.inp {
width: 200px;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script> 引入jQuery文件
<script type="text/javascript">
------------------------在此完善功能-----------------------
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr> 是空格的意思，html中 直接打空格 无论多少个都表示一个， 则有多少个就是多少个空格
<tr> 因此，当只有一个空格时，二者无区别
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmployee">Delete</a></td>
</tr> 这个超链接网址应该是自己随便写的，目的只是让其可以点击，方便绑定单击事件，但不想让它跳转，需要返回false
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmployee">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmployee">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h2>添加新员工</h2>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton">提 交</button>
</td> button标签 和 input标签，type=button？区别？
</tr>
</table>
</div>
</body>
</html>
2. JS实现功能
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
1. 给每列的a标签绑定单击事件 注意：此时只会给现存的初始化的三个完成的绑定
$("a").click(function () {
//在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
var $trObj=$(this).parent().parent(); //$(this)转化为jQuery对象；获取该a标签所在的行标签
var name=$trObj.find("td:first").text();
if (confirm("你确定要删除[ "+name+" ]吗？")) {
$trObj.remove();
}
return false; //绑定单击事件，返回false，不让其跳转
confirm 是JavaScript语言提供的一个确认提示框函数。你给它传什么，它就提示什么
当用户点击了确定，就返回true。当用户点击了取消，就返回false
});
2. 给【Submit】按钮绑定单击事件
$("#addEmpButton").click(function () {
2.1获取当前输入框，姓名，邮箱，工资的内容
var name=$("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val(); //忽略对文本内容的限制，否则考虑正则表达式
2.2创建一个行标签对象，添加到显示数据的表格中
var stringHtml="<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmployee\">Delete</a></td>" +
"</tr>"; //转义字符 \
var $trObj=$(stringHtml);
$trObj.appendTo( $("#employeeTable") );
2.3 给每个新加入的行标签的a标签绑定单击事件
$trObj.find("a").click(function () {
var $trObj=$(this).parent().parent(); //$(this)转化为jQuery对象；获取该a标签所在的行标签
var name=$trObj.find("td:first").text();
if (confirm("你确定要删除[ "+name+" ]吗？")) {
$trObj.remove();
}
return false; //绑定单击事件，返回false，不让其跳转
});
});
});
</script>
代码优化 实现函数复用
初始化时给三个a标签绑定了单击事件，但是在后来每次添加行记录时，都会给a标签再绑定一次单击事件，因此。每次绑定单击事件里面的删除行标签的代码都要再写一遍。我们可以将删除行标签的代码写成一个函数，实现代码复用。
由于this的使用，注意这里面代码复用下，函数调用的方式：
在事件响应的function函数中，有一个this对象。这个this对象是当前正在响应事件的dom对象。
方式一：
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var deleteFun = function ($aObj) {
不需要return false
//注意这里的this对象
var $trObj = $aObj.parent().parent(); //$(this)转化为jQuery对象；获取该a标签所在的行标签
var name = $trObj.find("td:first").text();
if (confirm("你确定要删除[ " + name + " ]吗？")) {
$trObj.remove();
}
};
//1.给每列的a标签绑定单击事件 注意：此时只会给现存的初始化的三个完成的绑定
$("a").click( function () {
deleteFun( $(this) );
return false;//绑定单击事件，返回false，不让其跳转
});
//2. 给【Submit】按钮绑定单击事件
$("#addEmpButton").click(function () {
// 2.1获取当前输入框，姓名，邮箱，工资的内容
var name=$("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val(); //忽略对文本内容的限制，否则考虑正则表达式
// 2.2创建一个行标签对象，添加到显示数据的表格中
var stringHtml="<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmployee\">Delete</a></td>" +
"</tr>"; //转义字符 \
var $trObj=$(stringHtml);
$trObj.appendTo( $("#employeeTable") );
//2.3 给每个新加入的行标签的a标签绑定单击事件
$trObj.find("a").click(function () {
deleteFun($(this));
return false;//绑定单击事件，返回false，不让其跳转
});
});
});
</script>
方式二：
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
var deleteFun = function () {
需要return false
//注意这里的this对象
var $trObj = $(this).parent().parent(); //$(this)转化为jQuery对象；获取该a标签所在的行标签
var name = $trObj.find("td:first").text();
if (confirm("你确定要删除[ " + name + " ]吗？")) {
$trObj.remove();
}
return false;
};
//1.给每列的a标签绑定单击事件 注意：此时只会给现存的初始化的三个完成的绑定
$("a").click( deleteFun );
//2. 给【Submit】按钮绑定单击事件
$("#addEmpButton").click(function () {
// 2.1获取当前输入框，姓名，邮箱，工资的内容
var name=$("#empName").val();
var email = $("#email").val();
var salary = $("#salary").val(); //忽略对文本内容的限制，否则考虑正则表达式
// 2.2创建一个行标签对象，添加到显示数据的表格中
var stringHtml="<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href=\"deleteEmployee\">Delete</a></td>" +
"</tr>"; //转义字符 \
var $trObj=$(stringHtml);
$trObj.appendTo( $("#employeeTable") );
//2.3 给每个新加入的行标签的a标签绑定单击事件
$trObj.find("a").click( deleteFun );
});
});
</script>
$(“a”).click( function(){……} );
两种思路：
- 一种是在function函数中调用deleteFun函数，即方式一
$("a").click( function(){ deleteFun(); } ); - 另一种是用deleteFun函数代替function函数,即方式二
$("a").click( deleteFun );
方式二注意：
$ (“a”).click( deleteFun );
一定不要写成 $ (“a”).click( deleteFun() );
deleteFun() 是调用函数的意思，最终是获得函数的返回值。