js表格中的DOM操作之添加、删除行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
/**
功能实现：1、实现表格添加一行
2、实现表格删除当前行
步骤：1、根据表格id获取当前表格
2、获取表格中的tBody(Bodies[0])
3、为添加按钮增加click事件，为tBody创建子节点添加
4、为当前行的a元素增加click事件，删除本行
注意点：1、添加一行时，生成序号的获取
2、删除时，获取a元素，添加事件
*/
window.onload = function(){
//获取ID为tab1的表格
var oTab = document.getElementById('tab1');
//获取id为name的文本框
var oName = document.getElementById('name');
//获取id为age的文本框
var oAge = document.getElementById('age');
//获取id为btn1的按钮
var oBtn = document.getElementById('btn1');
var index= oTab.tBodies[0].rows.length;
//为oBtn添加click事件，每点击一次，增加一行
oBtn.onclick = function (){
//创建元素tr
var oTr =document.createElement('tr');
index++;
//创建第一个td
var oTd1 = document.createElement('td');
//***序号id获取要注意
oTd1.innerHTML = index;
oTr.appendChild(oTd1);
//创建
var oTd2 = document.createElement('td');
oTd2.innerHTML = oName.value;
oTr.appendChild(oTd2);
var oTd3 = document.createElement('td');
oTd3.innerHTML = oAge.value;
oTr.appendChild(oTd3);
var oTd4 = document.createElement('td');
oTd4.innerHTML = '<a href="javascript:;">删除</a>';
oTr.appendChild(oTd4);
//**获取到当前添加行里的a元素，增加click事件
oTd4.getElementsByTagName('a')[0].onclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
//将tr添加到tbody中
oTab.tBodies[0].appendChild(oTr);
}
}
</script>
</head>
<body>
姓名：<input type="text" id="name" />
年龄: <input type="text" id="age" />
<input type="button" id="btn1" value="添加一行" />
<table border="1px" width="300px" id="tab1">
<tHead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</tr>
</tHead>
<tBody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>50</td>
</tr>
<tr>
<td>5</td>
<td>王小七</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td>刘小二</td>
<td>36</td>
</tr>
</tBody>
</table>
</body>
</html>