您的位置：首页 > Web前端 > JQuery

[置顶] jquery的删除和增加

2015-12-03 14:01 621 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="styleB/css.css" />

<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>

<script type="text/javascript">
$(function(){
//为所有超链接绑定单机响应函数
$("a").click(function(){
//删除操作
//获取tr
var $tr=$(this).parent().parent();
//获取第一个td 的文本值
var $td=$tr.children("td").first().text();
//删除要删除的值
var flag=confirm("确认要删除"+$td+"的吗？");
if(flag){
$tr.remove();
}
//取消超链接的默认行为
return false;
});
//添加操作
//为submit 绑定单机响应函数
$("#addEmpButton").click(function(){
//获取用户输入的所有值
var name=$("#empName").val();
var email=$("#email").val();
var salary=$("#salary").val();
var $td=$("<td><a href='#'>Delete</a></td>");
//组装tr,并将tr放入到table 中
$("<tr></tr>").append("<td>"+name+"</td>")
 .append("<td>"+email+"</td>")
 .append("<td>"+salary+"</td>")
 .append($td)
 .appendTo($("#employeeTable"));
//给超链接绑定单机响应函数
$td.children().click(function(){
//删除操作
var $tr=$(this).parent().parent();
var $td=$tr.children("td").first().text();
var flag=confirm("确认要删除"+$td+"的吗？");
if(flag){
$tr.remove();
}
return false;
});
});
});

</script>

</head>

<body>

<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>

<div id="formDiv">

<h4>添加新员工</h4>

<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" value="abc">
Submit
</button>
</td>
</tr>
</table>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航