What I want to achieve is to delete the second half of the table below directly using JS.
But I don’t know how to call it.
That is, starting from the position of <h2>2017</h2> and ending with the last part.
How to delete DOM elements using JS?
<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" align="center" 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 class="top" colspan="3">
A3<br>證件號碼
</td>
<td class="top">
A4<br>與戶主關(guān)系
</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>勞動(dòng)技能
</td>
<td class="top">
A11<br>務(wù)工情況
</td>
<td class="top">
A12<br>務(wù)工時(shí)間(單位:月)
</td>
<td class="top">
A13<br>是否現(xiàn)役軍人
</td>
<td class="top right">
A14<br>是否參加大病醫(yī)療保險(xiǎn)
</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">無勞動(dòng)力</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 class="right ng-binding" ng-bind="cell.data.AAB022"></td>
</tr><!-- end ngRepeat: cell in row.AB01 -->
<tr>
<td colspan="19" align="center" 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 class="top" colspan="3">
A3<br>證件號碼
</td>
<td class="top">
A4<br>與戶主關(guān)系
</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>勞動(dòng)技能
</td>
<td class="top">
A11<br>務(wù)工地點(diǎn)
</td>
<td class="top">
A12<br>務(wù)工時(shí)間(單位:月)
</td>
<td class="top">
A13<br>是否現(xiàn)役軍人
</td>
<td class="top">
A14<br>是否參加大病醫(yī)療保險(xiǎn)
</td>
<td class="top">
A15<br>是否享受低保
</td>
<td class="top">
A50<br>務(wù)工企業(yè)名稱
</td>
<td class="top right">
聯(lián)系電話
</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>
1
0
0
Why not extract it separately and write "2017" into a table independently?
If you must do this, you can:
Add a name attribute (such as name="special-tr-group") to all the first-level tr you want to hide
as follows:
<tr name="special-tr-group">
<td colspan="19" align="center" 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>
...
...Then add an id to your tbody:
<tbody style="text-align:center;" id="tbody-year">Finally, after your DOM is loaded, JS implementation:
var tBody = document.getElementById("tbody-year"); //表格中的tbody節(jié)點(diǎn)
console.log(tBody);
var trGroup = document.getElementsByName("special-tr-group"); //要?jiǎng)h除的節(jié)點(diǎn)
for (var i=0; i < trGroup.length; i++) {
tBody.removeChild(trGroup[i]);
}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
