1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>添加删除记录练习</title>
7 <link rel="stylesheet" type="text/css" href="css.css"/>
8 </head>
9 <body>
10
11 <table id="employeeTable">
12 <tr>
13 <th>Name</th>
14 <th>Email</th>
15 <th>Salary</th>
16 <th> </th>
17 </tr>
18 <tr>
19 <td>Tom</td>
20 <td>tom@tom.com</td>
21 <td>5000</td>
22 <td><a href="deleteEmp?id=001">Delete</a></td>
23 </tr>
24 <tr>
25 <td>Jerry</td>
26 <td>jerry@sohu.com</td>
27 <td>8000</td>
28 <td><a href="deleteEmp?id=002">Delete</a></td>
29 </tr>
30 <tr>
31 <td>Bob</td>
32 <td>bob@tom.com</td>
33 <td>10000</td>
34 <td><a href="deleteEmp?id=003">Delete</a></td>
35 </tr>
36
37 </table>
38
39 <div id="formDiv">
40
41 <h4>添加新员工</h4>
42
43 <table>
44 <tr>
45 <td class="word">name:</td>
46 <td class="inp">
47 <input type="text" name="empName" id="empName"/>
48 </td>
49 </tr>
50 <tr>
51 <td class="word">email:</td>
52 <td class="inp">
53 <input type="text" name="email" id="email"/>
54 </td>
55 </tr>
56 <tr>
57 <td class="word">salary:</td>
58 <td class="inp">
59 <input type="text" name="salary" id="salary"/>
60 </td>
61 </tr>
62 <tr>
63 <td colspan="2" align="center">
64 <button id="addEmpButton" value="abc">
65 Submit
66 </button>
67 </td>
68 </tr>
69 </table>
70 </div>
71
72 <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
73 <script type="text/javascript">
74 /*
75 功能说明:
76 1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
77 2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
78 技术要点:
79 1. DOM查询
80 2. 绑定事件监听
81 3. DOM增删改
82 4. 取消事件的默认行为
83 */
84 $(function () {
85 // 获取三个输入框
86 var $empName = $('#empName');
87 var $email = $('#email');
88 var $salary = $('#salary');
89 // 给提交按钮绑定单击事件 获取三个输入框的value 拼装节点
90 $('#addEmpButton').click(function () {
91 // 不带$的 是输入框的值 带$的 是元素 这个意义 是你自己人为赋予的
92 var empName = $empName.val();
93 var email = $email.val();
94 var salary = $salary.val();
95 // 任意一个输入框为空 都不能进入这个if里边
96 if($.trim(empName) && $.trim(email) && $.trim(salary) ){ //输入框有数据
97 // 拼装节点
98 // <tr>
99 // <td>Bob</td>
100 // <td>bob@tom.com</td>
101 // <td>10000</td>
102 // <td><a href="deleteEmp?id=003">Delete</a></td>
103 // </tr>
104
105 //新增的tr,添加到#employeeTable tbody
106 $('<tr></tr>')
107 .append('<td>'+empName+'</td>')
108 .append('<td>'+email+'</td>')
109 .append('<td>'+salary+'</td>')
110 .append('<td><a href="deleteEmp?id=003">Delete</a></td>')
111 .appendTo('#employeeTable tbody')
112
113 }else {
114 // 请不要提交空信息
115 alert('请不要输入空信息')
116 }
117 // 清空三个输入框
118 $empName.val('');
119 $email.val('');
120 $salary.val('');
121 });
122
123
124
125 // 删除按钮
126 //事件委派方式delegate函数,this 为事件源，新增的li也会有效果
127 $('#employeeTable').delegate('a','click', function(event){
128 // 阻止默认行为
129 event.preventDefault();
130 // 根据当前点击的a标签 找到它所对应的tr
131 var $tr = $(this).parent().parent();
132 // 获取当前这个tr中的name
133 var name = $tr.children(':first').html();
134 // 提示是否要删除这个name对应的信息 确定就删除 取消就不操作
135 // confirm 确认框 有两个按钮 确认和取消 括号里边写提示信息
136 // 如果点击确认 则返回true 点击取消 则返回false
137 // 所以常和if 配合使用 把confirm 写在 if的判断条件中 如果点击确认即可执行if里边的逻辑
138 if(confirm('你确定要删除'+name+'的信息么？')){
139 $tr.remove();
140 }
141
142 // return false;
143 }
144 );
145
146 })
147 </script>
148 </body>
149 </html>
