简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 一道js練習題，為什麼這裡最後getElementsByTagName('a')[0]是0
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-26 10:57:27
0
4
839
<!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>

這個實作效果是一個表格中，最後一列加入刪除的效果，我搞不懂，createElement創建了a標籤添加刪除功能之後，為什麼oTd.getElementsByTagName('a')[0].onclick=function( ) 這裡面TagName選的是[0]，不是每次都會建立一個a標籤來觸發js麼。為什麼不是做個for循環給每個a來加onclick

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

全部回覆(4)
typecho
typecho2017-06-26 10:59:27 4樓

點贊 +0
新增回覆
迷茫
迷茫2017-06-26 10:59:27 3樓

這是慕課網上JS的課程吧'oTd'本來就是oBtn.onclick之後才會創建的元素這裡面的a元素當然也是新建的;
為何還總是要用[0]? 因為getElementsTagName('a ')回傳的是一個元素list 即使長度只有1 也要用[0]或.item(0)來拿到這個DOM元素

點贊 +0
新增回覆
代言
代言2017-06-26 10:59:27 2樓

透過你的程式碼可知，此時的oTd是用來存放刪除連結的td元素，設定完innerHTML屬性之後，此時的td元素為
刪除 a>；
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元素註冊了點擊事件；當你第二次點擊添加的時候，因為第一條信息已經有點擊事件了，為什麼還要再覆蓋一次點擊事件？你只需要給新新增的元素註冊點擊事件就可以了啊。

點贊 +0
新增回覆
小葫芦
小葫芦2017-06-26 10:59:27 1樓

動態創建的element元素是無法綁定click事件的，用使用到on或bind。

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！