登录

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" 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>与户主关系
                </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 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>与户主关系
                </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>
# JavaScript
三叔 三叔 2480 天前 752 次浏览

全部回复(1) 我要回复

  • 女神的闺蜜爱上我

    女神的闺蜜爱上我2017-07-05 11:00:06

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

    1. 给你要隐藏的所有一级tr加一个name属性(如name="special-tr-group")
      如下:

    <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>
    ...
    ...
    1. 然后给你的tbody加一个id:

    <tbody style="text-align:center;" id="tbody-year">
    1. 最后,在你的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]);
    }

    回复
    0
  • 取消 回复 发送