問題描述

我想實現的是把下面的這個表格的后半部分直接用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]);}