cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Soalan latihan js, mengapa getElementsByTagName('a')[0] terakhir di sini ialah 0

<!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

女神的闺蜜爱上我女神的闺蜜爱上我2711 hari yang lalu854

membalas semua(4)saya akan balas

  • typecho

    typecho2017-06-26 10:59:27

    balas
    0
  • 迷茫

    迷茫2017-06-26 10:59:27

    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

    .

    balas
    0
  • 代言

    代言2017-06-26 10:59:27

    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.

    balas
    0
  • 高洛峰

    高洛峰2017-06-26 10:59:27

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

    balas
    0
  • Batalbalas