- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
<!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
迷茫2017-06-26 10:59:27
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
代言2017-06-26 10:59:27
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元素组成的数组，因为该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 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);
}
}
高洛峰2017-06-26 10:59:27
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.