简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Soalan latihan js, mengapa getElementsByTagName('a')[0] terakhir di sini ialah 0
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-26 10:57:27
0
4
813
<!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>

Kesan pelaksanaan ini ialah kesan penambahan dan pemadaman lajur terakhir dalam jadual Saya tidak faham mengapa oTd.getElementsByTagName('a')[0].onclick=function() melakukan ini selepas createElement mencipta a. tag menambah dan memadam fungsi TagName yang dipilih ialah [0]. Mengapa tidak membuat gelung for untuk menambah onclick pada setiap a

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

membalas semua(4)
typecho
typecho2017-06-26 10:59:27 Tingkat 4

Suka +0
Tambah Balasan
迷茫
迷茫2017-06-26 10:59:27 Tingkat 3

Ini adalah kursus JS dalam talian MOOC pada asalnya adalah elemen yang dicipta selepas oBtn.onclick Sudah tentu, elemen di dalamnya juga baru dibuat
Mengapa anda sentiasa menggunakan [0] 'a ') mengembalikan senarai elemen Walaupun panjangnya hanya 1, anda masih perlu menggunakan [0] atau .item(0) untuk mendapatkan elemen DOM ini

.
Suka +0
Tambah Balasan
代言
代言2017-06-26 10:59:27 Tingkat 2

Ia boleh dilihat daripada kod anda bahawa oTd pada masa ini digunakan untuk menyimpan elemen td pautan padam Selepas menetapkan atribut innerHTML, elemen td pada masa ini ialah
<td><a. href='javascript:' >Padam</a></td>; <td><a href='javascript:'>删除</a></td>；
oTd.getElementsByTagName('a')的返回值是该td元素（限定了选择范围，就是从包含这个a元素的父元素td中选择，而不是table元素）中包含的a元素组成的数组，因为该td元素只包含一个a元素，所以结果是长度为1的数组，要获取这个a元素，当然是取结果的[0]oTd.getElementsByTagName('a')Nilai pulangan ialah elemen td (julat pilihan terhad , iaitu, daripada Pilih tatasusunan elemen yang terkandung dalam elemen induk td elemen ini dan bukannya elemen jadual). dapatkan elemen ini, sudah tentu hasilnya adalah [0] (subskrip tatasusunan bermula dari 0);

Anda boleh menggunakan gelung for untuk menambah acara onclick Anda boleh menggunakan

selepas setiap pelaksanaan pernyataan 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);
    }
}
Tetapi masalahnya ialah apabila anda mengklik tambah untuk kali pertama, acara klik didaftarkan untuk elemen maklumat pertama yang ditambahkan apabila anda mengklik tambah untuk kali kedua, kerana maklumat pertama sudah mempunyai a acara klik, Mengapa kita perlu menulis ganti acara klik sekali lagi? Anda hanya perlu mendaftarkan acara klik untuk elemen yang baru ditambah.

Suka +0
Tambah Balasan
小葫芦
小葫芦2017-06-26 10:59:27 Tingkat 1

Elemen elemen yang dicipta secara dinamik tidak boleh terikat pada acara klik Anda mesti menggunakan pada atau mengikat.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！