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>