1 <!--删除选中的行,利用oTable.deleteRow(i)方法--> 2 <!DOCTYPE html> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 6 <title></title> 7 <script> 8 window.onload = function () 9 { 10 var oBtn = document.getElementById('Button1'); //获取ID为按钮 11 var oTable = document.getElementById('table1'); //获取ID为表格 12 var oCheckbox = document.getElementsByName('checkbox');//获取所有的name值为CheckBox 13 14 15 //单击按钮的事件 16 oBtn.onclick = function () { 17 for (var i = 0; i < oCheckbox.length; i++) { //遍历所有的复选框为选中的 18 if (oCheckbox[i].checked) { //如果选中 19 oTable.deleteRow(i); //删除选中的行 20 } 21 } 22 } 23 } 24 25 </script> 26 </head> 27 <body> 28 <table id="table1"> 29 <tr> 30 <td> 31 <input id="Checkbox2" type="checkbox" name="checkbox"/> 32 </td> 33 <td>1</td> 34 <td>i</td> 35 <td>你好</td> 36 </tr> 37 <tr> 38 <td> 39 <input id="Checkbox3" type="checkbox" name="checkbox" /> 40 </td> 41 <td>2</td> 42 <td>y</td> 43 <td>世界</td> 44 </tr> 45 <tr> 46 <td> 47 <input id="Checkbox4" type="checkbox" name="checkbox" /> 48 </td> 49 <td>3</td> 50 <td>x</td> 51 <td>你好世界</td> 52 </tr> 53 <tr> 54 <td> 55 <input id="Button1" type="button" value="删除" /> 56 </td> 57 </tr> 58 </table> 59 </body> 60 </html>2018-06-19
CheckBox-复选框-删除-选中行
猜你喜欢
转载自www.cnblogs.com/HuangLiming/p/9198893.html
今日推荐
周排行