2-13 编程练习
本节编程练习不计算学习进度，请电脑登录imooc.com操作

编程练习

小伙伴们，根据所学知识，实现表格行的批量删除功能，点击删除按钮，删除所有勾选的行。

效果图:

 

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习视频内容。

任务

一、监听删除按钮点击事件，删除已选行。

提示:
  1. 遍历所有行
  2. 取得行的勾选框，判断是否勾选
  3. 如果勾选，使用removeChild方法删除
  4. 回置下标i
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         table {
  8.             border-collapse: collapse;
  9.         }
  10.         td {
  11.             border: 1px solid #333333;
  12.         }
  13.     </style>
  14.     <script type="text/javascript">
  15.         window.onload = function () {
  16.  
  17.             // 获取元素
  18.             var table = document.getElementById('table');
  19.             var tr = table.getElementsByTagName('tr');
  20.             var del = document.getElementById('del');
  21.  
  22.             //绑定点击删除按钮回调函数
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.         }
  34.     </script>
  35. </head>
  36. <body>
  37. <table id="table">
  38.     <tr>
  39.         <td><input type="checkbox"/></td>
  40.         <td>1</td>
  41.     </tr>
  42.     <tr>
  43.         <td><input type="checkbox"/></td>
  44.         <td>2</td>
  45.     </tr>
  46.     <tr>
  47.         <td><input type="checkbox"/></td>
  48.         <td>3</td>
  49.     </tr>
  50.     <tr>
  51.         <td><input type="checkbox"/></td>
  52.         <td>4</td>
  53.     </tr>
  54. </table>
  55. <button id="del">删除</button>
  56. </body>
  57. </html>
下一节