javascript - 一道js练习题，为什么这里最后getElementsByTagName('a')[0]是0
本文介绍了javascript - 一道js练习题，为什么这里最后getElementsByTagName('a')[0]是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>
这个实现效果是一个表格中，最后一列添加删除的效果，我搞不懂，createElement创建了a标签添加删除功能之后，为什么 oTd.getElementsByTagName('a')[0].onclick=function() 这里面TagName选的是[0]，不是每一次都会创建一个a标签来触发js么。 为什么不是做个for循环给每个a来加onclick
解决方案
这篇关于javascript - 一道js练习题，为什么这里最后getElementsByTagName('a')[0]是0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
