<!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
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 <td><a. href='javascript:' >Delete</a></td>
; <td><a href='javascript:'>刪除</a></td>
;oTd.getElementsByTagName('a')
的返回值是該td元素(限定了選擇范圍,就是從包含這個a元素的父元素td中選擇,而不是table元素)中包含的a元素組成的數(shù)組,因為該td元素只包含一個a元素,所以結(jié)果是長度為1的數(shù)組,要獲取這個a元素,當(dāng)然是取結(jié)果的[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 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);
}
}
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é. 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.