<!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>
The effect of this implementation is the effect of adding and deleting the last column in a table. I don’t understand why oTd.getElementsByTagName('a')[0].onclick=function( ) The TagName selected here is [0]. Isn't an a tag created every time to trigger js? Why not make a for loop and add onclick
to each a?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is a MOOC online JS course. 'oTd' is originally an element that is created after oBtn.onclick. Of course, the a element in it is also newly created;
Why do you always use [0]? Because getElementsTagName('a ') returns an element list. Even if the length is only 1, you still need to use [0] or .item(0) to get this DOM element
It can be seen from your code that the oTd at this time is used to store the td element of the delete link. After setting the innerHTML attribute, the td element at this time is
<td><a href='javascript:'> Delete </a></td>;oTd.getElementsByTagName('a')The return value is the td element (the selection range is limited, which is to select from the parent element td that contains the a element, Instead of an array of a elements contained in the table element), because the td element only contains one a element, the result is an array with a length of 1. To obtain this a element, of course, the result is[0](Array subscripts start from 0);You can use a for loop to add onclick events. You can use
statement.after each execution of theoTab.tBodies[0].appendChild(oTr);But the problem is that when you click add for the first time, a click event is registered for the a element of the first piece of information added; when you click add for the second time, because the first piece of information already has a click event, Why do we need to overwrite the click event again? You only need to register the click event for the newly added element.
Dynamicly created element elements cannot be bound to click events. You must use on or bind.