简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript – Eine js-Übungsfrage, warum der letzte getElementsByTagName('a')[0] hier 0 ist
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-26 10:57:27
0
4
840
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function()
        {
            var oTab = document.getElementById('tab1');
            var oName = document.getElementById('name');
            var oAge = document.getElementById('age');
            var oBtn = document.getElementById('btn');
            var id =  oTab.rows.length+1;
            oBtn.onclick=function()
            {
                var oTr = document.createElement('tr');
                var oTd = document.createElement('td');
                oTd.innerHTML = id++;
                oTr.appendChild(oTd);

                var oTd = document.createElement('td');
                oTd.innerHTML =oName.value;
                oTr.appendChild(oTd);


                var oTd = document.createElement('td');
                oTd.innerHTML = oAge.value ;
                oTr.appendChild(oTd);


                var oTd = document.createElement('td');
                oTd.innerHTML = "<a href='javascript:'>删除</a>" ;
                oTr.appendChild(oTd);

                oTd.getElementsByTagName('a')[0].onclick=function()
                {
                    oTab.tBodies[0].removeChild(this.parentNode.parentNode);
                }
                

                oTab.tBodies[0].appendChild(oTr);


            }
        }
        
    </script>
</head>
<body>
    姓名：<input id="name" type="text" />
    班级：<input id="age" type="text" />
    <input id="btn" type="button" value='添加' />
    <table id="tab1" border="1px" width="600px">
        <tHead>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>操作</td>
        </tHead>
        <tbody>
            <tr>
                <td>2</td>
                <td>22</td>
                <td>33</td>
                <td></td>
            </tr>
            <tr>
                <td>3</td>
                <td>22</td>
                <td>33</td>
                <td></td>
            </tr>
            <tr>
                <td>4</td>
                <td>22</td>
                <td>33</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Der Effekt dieser Implementierung ist der Effekt des Hinzufügens und Löschens der letzten Spalte in einer Tabelle. Ich verstehe nicht, warum oTd.getElementsByTagName('a')[0].onclick=function() dies tut, nachdem createElement das a erstellt hat Funktion zum Hinzufügen und Löschen von Tags. Der ausgewählte TagName ist nicht jedes Mal ein Tag, um js auszulösen. Warum nicht eine for-Schleife erstellen, um jedem a einen Klick hinzuzufügen?

女神的闺蜜爱上我
女神的闺蜜爱上我

Antworte allen(4)
typecho
typecho2017-06-26 10:59:27 4 Etage

Wie +0
Antwort hinzufügen
迷茫
迷茫2017-06-26 10:59:27 3 Etage

这是慕课网上JS的课程吧 'oTd'本来就是 oBtn.onclick之后才会创建的元素 这里面的a元素当然也是新建的;
为何还总是要用[0]? 因为getElementsTagName('a')返回的是一个元素list 即使长度只有1 也要用[0]或者.item(0)来拿到这个DOM元素

Wie +0
Antwort hinzufügen
代言
代言2017-06-26 10:59:27 2 Etage

通过你的代码可知，此时的oTd是用来存放删除链接的td元素，设置完innerHTML属性之后，此时的td元素为
<td><a href='javascript:'>删除</a></td>；
oTd.getElementsByTagName('a')的返回值是该td元素（限定了选择范围，就是从包含这个a元素的父元素td中选择，而不是table元素）中包含的a元素组成的数组，因为该td元素只包含一个a元素，所以结果是长度为1的数组，要获取这个a元素，当然是取结果的[0]了（数组下标从0开始）；

可以用一个for循环来添加onclick事件，你可以在每次执行完oTab.tBodies[0].appendChild(oTr);语句后，使用

var aArray = oTab.getElementsByTagName("a");
for (var i = 0; i < aArray.length; i++) {
    aArray[i].onclick = function() {
        oTab.tBodies[0].removeChild(this.parentNode.parentNode);
    }
}

但是问题是，你在第一个点击添加的时候，给第一条添加信息的a元素注册了点击事件；当你第二次点击添加的时候，因为第一条信息已经有点击事件了，为什么还要再覆盖一次点击事件呢？你只需要给新添加的元素注册点击事件就可以了啊。

Wie +0
Antwort hinzufügen
小葫芦
小葫芦2017-06-26 10:59:27 1 Etage

动态创建的element元素是无法绑定click事件的，用使用到on或者bind。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！