javascript - js 修改表格元素的，可以用DOM操作实现吗？

问题描述

我想实现的是把下面的这个表格的后半部分直接用JS删除掉。但是不知道怎么调用。就是从<h2>2017年度</h2>这个位置开始到最后的部分都不要了。如何用JS删除DOM元素的方法实现？

<table cellpadding='0' cellspacing='0' style='word-wrap: break-word;'><colgroup class='__web-inspector-hide-shortcut__'> <col width='10px'> <col width='49px'> <col width='10px'> <col width='88px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'> <col width='49px'></colgroup><tbody style='text-align:center;'> <tr> </tr> <tr><td colspan='19' style='border:none;'> <h2><span ng-bind='compare_year' class='ng-binding'>2016</span>年度</h2></td> </tr> <tr class=''><td class='top'> 序号</td><td class='top'> A1<br>姓名</td><td class='top'> A2<br>性别</td><td colspan='3'> A3<br>证件号码</td><td class='top'> A4<br>与户主关系</td><td class='top'> A5<br>民族</td><td class='top'> A6<br>政治面貌</td><td class='top'> A7<br>文化程度</td> <td class='top'> A8<br>在校生情况</td><td class='top'> A9<br>健康状况</td><td class='top'> A10<br>劳动技能</td><td class='top'> A11<br>务工情况</td><td class='top'> A12<br>务工时间(单位:月)</td><td class='top'> A13<br>是否现役军人</td><td class='top right'> A14<br>是否参加大病医疗保险</td> </tr> <!-- <tr ng-repeat='row in AB01.rowSet.primary'> --><!-- ngRepeat: cell in row.AB01 --><tr ng-repeat='cell in row.AB01' class='ng-scope'> <td ng-bind='$index+1' class='ng-binding'>1</td><td ng-bind='cell.data.AAB002' class='ng-binding'>王秀梅</td><td ng-bind='cell.data.AAB003' class='ng-binding'>女</td><td colspan='3' ng-bind='cell.data.AAB004' class='ng-binding'>37250*81766</td><td ng-bind='cell.data.AAB006' class='ng-binding'>户主</td><td ng-bind='cell.data.AAB007' class='ng-binding'>汉族</td><td ng-bind='cell.data.AAK033' class='ng-binding'>群众</td><td ng-bind='cell.data.AAB008' class='ng-binding'>文盲或半文盲</td><td ng-bind='cell.data.AAB009' class='ng-binding'>非在校生</td><td ng-bind='cell.data.AAB017' class='ng-binding'>长期慢性病</td><td ng-bind='cell.data.AAB010' class='ng-binding'>无劳动力</td><td ng-bind='cell.data.AAB011' class='ng-binding'>其他</td><td ng-bind='cell.data.AAB012' class='ng-binding'>0</td><td ng-bind='cell.data.AAB019' class='ng-binding'>否</td><td ng-bind='cell.data.AAB022'></td> </tr><!-- end ngRepeat: cell in row.AB01 --> <tr><td colspan='19' style='border:none;'> <h2>2017年度</h2></td> </tr> <tr><td class='top'> 序号</td><td class='top'> A1<br>姓名</td><td class='top'> A2<br>性别</td><td colspan='3'> A3<br>证件号码</td><td class='top'> A4<br>与户主关系</td><td class='top'> A5<br>民族</td><td class='top'> A6<br>政治面貌</td><td class='top'> A7<br>文化程度</td><td class='top'> A8<br>在校生情况</td><td class='top'> A9<br>健康状况</td><td class='top'> A10<br>劳动技能</td><td class='top'> A11<br>务工地点</td><td class='top'> A12<br>务工时间(单位:月) </td><td class='top'> A13<br>是否现役军人</td><td class='top'> A14<br>是否参加大病医疗保险 </td><td class='top'> A15<br>是否享受低保</td><td class='top'> A50<br>务工企业名称</td><td class='top right'> 联系电话</td> </tr> <tr><td>1</td><td></td><td></td><td colspan='3'></td><td>户主</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class='right'></td> </tr> <tr><td>2</td><td></td><td></td><td colspan='3'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class='right'></td> </tr> <tr><td>3</td><td></td><td></td><td colspan='3'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class='right'></td> </tr> <tr><td>4</td><td></td><td></td><td colspan='3'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class='right'></td> </tr> <tr><td>5</td><td></td><td></td><td colspan='3'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class='right'></td> </tr> <tr><td>6</td><td></td><td></td><td colspan='3'></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td class='right'></td> </tr></tbody>

问题解答

为什么不单独抽出来，“2017年”的独立写成一个table呢？如果一定要这么做的话，可以：

给你要隐藏的所有一级tr加一个name属性（如name='special-tr-group'）如下：

<tr name='special-tr-group'> <td colspan='19' style='border:none;'><h2>2017年度</h2> </td></tr><tr name='special-tr-group'> <td class='top'>序号 </td> <td class='top'>A1<br>姓名 </td> <td class='top'>A2<br>性别 </td> ... ...</tr>......

然后给你的tbody加一个id：

<tbody id='tbody-year'>

最后，在你的DOM加载完成后，JS实现：

var tBody = document.getElementById('tbody-year'); //表格中的tbody节点console.log(tBody);var trGroup = document.getElementsByName('special-tr-group'); //要删除的节点for (var i=0; i < trGroup.length; i++) { tBody.removeChild(trGroup[i]);}