先学习下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() 是调用函数的意思,最终是获得函数的返回值。