<!DOCTYPE >
<html>
<!--
作者:hyzhang
时间:2017-10-11
描述:document 对表格进行添加删除操作
-->
<head>
<meta charset="utf-8" />
<style>
/*tr:hover{
color: yellow;
}*/
</style>
</head>
<body>
<script>
window.οnlοad=function(){
var etable = document.getElementById("tbe");
var btn1 =document.getElementById("btn");
var text1 = document.getElementById("txt1");
var text2 = document.getElementById("txt2");
var indexNum = etable.tBodies[0].rows.length+1;
btn1.onclick = function(){
/*生成tr元素*/
var tr1 = document.createElement("tr");
/*生成td元素*/
var otd = document.createElement("td");
otd.innerHTML = indexNum ++;
tr1.appendChild(otd)
var otd = document.createElement("td");
otd.innerHTML = text1.value;
tr1.appendChild(otd)
var otd = document.createElement("td");
otd.innerHTML = text2.value;
tr1.appendChild(otd)
etable.tBodies[0].appendChild(tr1);
var otd = document.createElement("td");
otd.innerHTML = '<a href="javascript:;">删除</a>';
tr1.appendChild(otd)
otd.getElementsByTagName('a')[0].onclick = function(){
etable.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
</script>
姓名:<input id="txt1" type="text" />
年龄:<input id="txt2" type="text"/>
<input type="button" id="btn" value="添加" />
<table id="tbe" width="300" border="1">
<thead>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>4</td>
<td>前六</td>
<td>33</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<!--
作者:hyzhang
时间:2017-10-11
描述:document 对表格进行添加删除操作
-->
<head>
<meta charset="utf-8" />
<style>
/*tr:hover{
color: yellow;
}*/
</style>
</head>
<body>
<script>
window.οnlοad=function(){
var etable = document.getElementById("tbe");
var btn1 =document.getElementById("btn");
var text1 = document.getElementById("txt1");
var text2 = document.getElementById("txt2");
var indexNum = etable.tBodies[0].rows.length+1;
btn1.onclick = function(){
/*生成tr元素*/
var tr1 = document.createElement("tr");
/*生成td元素*/
var otd = document.createElement("td");
otd.innerHTML = indexNum ++;
tr1.appendChild(otd)
var otd = document.createElement("td");
otd.innerHTML = text1.value;
tr1.appendChild(otd)
var otd = document.createElement("td");
otd.innerHTML = text2.value;
tr1.appendChild(otd)
etable.tBodies[0].appendChild(tr1);
var otd = document.createElement("td");
otd.innerHTML = '<a href="javascript:;">删除</a>';
tr1.appendChild(otd)
otd.getElementsByTagName('a')[0].onclick = function(){
etable.tBodies[0].removeChild(this.parentNode.parentNode);
}
}
}
</script>
姓名:<input id="txt1" type="text" />
年龄:<input id="txt2" type="text"/>
<input type="button" id="btn" value="添加" />
<table id="tbe" width="300" border="1">
<thead>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>21</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>4</td>
<td>前六</td>
<td>33</td>
</tr>
</tbody>
</table>
</body>
</html>