<!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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
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
Anda boleh menggunakan gelung for untuk menambah acara onclick Anda boleh menggunakan<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);selepas setiap pelaksanaan pernyataan
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.oTab.tBodies[0].appendChild(oTr);.Elemen elemen yang dicipta secara dinamik tidak boleh terikat pada acara klik Anda mesti menggunakan pada atau mengikat.