添加删除练习

  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>&nbsp;</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>

 

posted @ 2020-05-24 20:20  全情海洋  阅读(211)  评论(0编辑  收藏  举报