javascript - Kann JS Tabellenelemente mithilfe von DOM-Operationen ändern?
三叔
三叔 2017-07-05 10:58:06
0
1
900

Was ich erreichen möchte, ist, die zweite Hälfte der Tabelle unten direkt mit JS zu löschen.
Aber ich weiß nicht, wie ich es nennen soll.
Das heißt, es ist nicht erforderlich, von der Position <h2>2017</h2> auszugehen.
Wie lösche ich DOM-Elemente mit 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>与户主关系
                </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>
三叔
三叔

Antworte allen(1)
女神的闺蜜爱上我

为什么不单独抽出来,“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]);
}
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage