Let's learn the confirm function first:
confirm is one provided by the JavaScript languageConfirm prompt box function.
What you pass to it will prompt it, and when the user clicks OK, it will return true. When the user clicks cancel, it returns false.
confirm("我是陆亿行-2021-02-01");
The implemented interface is as follows:
1. Initialization code
<!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 realization function
<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>
Code optimization to achieve function reuse
A click event is bound to the three a tags during initialization, but each time a row record is added later, a click event is bound to the a tag again, so. Each time you bind the click eventCode to remove row labelsHave to write it again. We can write the code to delete the row label as a function to achieve code reuse.
Due to the use of this, pay attention to the way the function is called under the reuse of the code:
there is a this object in the function function of the event response. This this object isCurrently responding to eventsThe dom object.
method one:
<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>
Way two:
<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(){……} );
Two ideas:
- One is to call the deleteFun function in the function function, that is, method one
$("a").click( function(){ deleteFun(); } ); - The other is to replace the function function with the deleteFun function, that is, the second method
$("a").click( deleteFun );
Way two attention:
$ ("a").click( deleteFun );
must not be written as $ ("a").click( deleteFun() );
deleteFun() means to call a function, and ultimately to get the return value of the function.