UDN-企业互联网技术人气社区

板块导航

浏览  : 532
回复  : 2

[实例] JavaScript DOM操作之动态删除TABLE多行

[复制链接]
狗尾巴草的头像 楼主
发表于 2015-11-10 18:01:25 | 显示全部楼层 |阅读模式
    DOM动态删除TABLE tr行的实现代码,需要的朋友可以参考下。
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>DOM动态删除TABLE多行</title>
  5. <script type="text/JavaScript">
  6. function $(objId){
  7. return document.getElementById(objId);
  8. }
  9. function del_tbl(tblN,ckN){
  10. var ck = document.getElementsByName(ckN);
  11.     var tab = $(tblN);
  12. var rowIndex;
  13. for(var i=0;i<ck.length;i++){
  14.         if(ck[i].checked){
  15. rowIndex = ck[i].parentNode.parentNode.sectionRowIndex;
  16.          tab.deleteRow(rowIndex);
  17. i = -1;
  18. }
  19. }
  20. }</script>
  21. </head>
  22. <body>
  23. <form id="form1" name="form1" method="post" action="">
  24. <table width="253" border="1" align="center" id="list">
  25. <tr>
  26. <td><input type="checkbox" name="cb_k" id="cb_k" /></td>
  27. <td>2</td>
  28. <td>3</td>
  29. </tr>
  30. <tr id="tr1">
  31. <td width="28" height="41"><input type="checkbox" name="del" id="del" /></td>
  32. <td width="124"><div align="center">第一行 </div></td>
  33. <td width="79"><div align="center">1</div></td>
  34. </tr>
  35. <tr id="tr2">
  36. <td height="36"><input type="checkbox" name="del" id="del" /></td>
  37. <td><div align="center">第二行 </div></td>
  38. <td><div align="center">2</div></td>
  39. </tr>
  40. <tr id="tr3">
  41. <td height="40"><input type="checkbox" name="del" id="del" /></td>
  42. <td><div align="center">第三行 </div></td>
  43. <td><div align="center">3</div></td>
  44. </tr>
  45. <tr id="tr4">
  46. <td height="37"><input type="checkbox" name="del" id="del" /></td>
  47. <td><div align="center">第四行 </div></td>
  48. <td><div align="center">4</div></td>
  49. </tr>
  50. <tr id="tr5">
  51. <td height="50"><input type="checkbox" name="del" id="del" /></td>
  52. <td><div align="center">第五行 </div></td>
  53. <td><div align="center">5</div></td>
  54. </tr>
  55. <tr>
  56. <td colspan="3">
  57. <div align="center">
  58. <input type="button" name="btn_del" id="btn_del" value="删 除" onclick="del_tbl('list','del')"/>
  59. </div></td>
  60. </tr>
  61. </table>
  62. </form>
  63. </body>
  64. </html>
复制代码

您可能感兴趣的文章:

  • JavaScript动态添加删除tabs标签的方法
  • JavaScript动态创建表格及删除行列的方法
  • JavaScript动态创建及删除元素的方法
  • JavaScript动态改变HTML页面元素例如添加或删除
  • JavaScript动态操作表格实例(添加,删除行,列及单元格)
  • JavaScript对talbe进行动态添加、删除、验证实现代码
  • 动态载入/删除/更新外部 JavaScript/Css 文件的代码
  • 如何实现动态删除JavaScript函数
  • JavaScript实现动态增加删除表格行(兼容IE/FF)
  • JavaScript实现动态删除列表框值的方法

相关帖子

发表于 2015-11-12 12:08:19 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

发表于 2015-11-13 13:41:24 | 显示全部楼层
我是被标题吸引进来的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部