<!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>
L'effet de cette implémentation est l'effet de l'ajout et de la suppression de la dernière colonne d'un tableau. Je ne comprends pas pourquoi oTd.getElementsByTagName('a')[0].onclick=function() fait cela après que createElement ait créé le a. fonction d'ajout et de suppression de balise. Le TagName sélectionné est [0]. Une balise a n'est-elle pas créée à chaque fois pour déclencher js ? Pourquoi ne pas créer une boucle for pour ajouter onclick à chaque a
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il s'agit d'un cours MOOC JS en ligne. 'oTd' est à l'origine un élément créé après oBtn.onclick. Bien sûr, l'élément a est également nouvellement créé
Pourquoi utilisez-vous toujours [0] Parce que getElementsTagName(. 'a ') renvoie une liste d'éléments. Même si la longueur n'est que de 1, vous devez toujours utiliser [0] ou .item(0) pour obtenir cet élément DOM
Il ressort de votre code que l'oTd à ce moment est utilisé pour stocker l'élément td du lien de suppression. Après avoir défini l'attribut innerHTML, l'élément td à ce moment est
Vous pouvez utiliser une boucle for pour ajouter des événements onclick. Vous pouvez utiliser<td><a. href='javascript:' >Delete</a></td>;<td><a href='javascript:'>删除</a></td>；oTd.getElementsByTagName('a')的返回值是该td元素（限定了选择范围，就是从包含这个a元素的父元素td中选择，而不是table元素）中包含的a元素组成的数组，因为该td元素只包含一个a元素，所以结果是长度为1的数组，要获取这个a元素，当然是取结果的[0]oTd.getElementsByTagName('a')La valeur de retour est l'élément td (plage de sélection limitée , c'est-à-dire de Sélectionnez le tableau des éléments a contenus dans l'élément parent td de cet élément a au lieu de l'élément table). Étant donné que l'élément td ne contient qu'un seul élément a, le résultat est un tableau d'une longueur de 1. To obtenez ceci un élément, bien sûr. Le résultat est[0](l'indice du tableau commence à 0) ;après chaque exécution de l'instruction
Mais le problème est que lorsque vous cliquez sur Ajouter pour la première fois, un événement de clic est enregistré pour l'élément de la première information ajoutée lorsque vous cliquez sur Ajouter pour la deuxième fois, car la première information a déjà un élément d'information ajouté. Événement de clic, pourquoi devons-nous écraser à nouveau l'événement de clic ? Il vous suffit d'enregistrer l'événement click pour l'élément nouvellement ajouté.oTab.tBodies[0].appendChild(oTr);.Les éléments d'élément créés dynamiquement ne peuvent pas être liés à des événements de clic. Vous devez les utiliser ou les lier.