js实现表格信息的删除和添加

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script type="text/javascript">

window.onload = function(){

var tr = document.getElementsByTagName('tr');

for(var i=0;i<tr.length;i++){

changeColor(tr[i]);

}

function changeColor(obj){

obj.onmouseover = function(){

obj.style.backgroundColor="#f2f2f2";

}

obj.onmouseout = function(){

obj.style.backgroundColor = "#fff";

}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

var num = 2;

function add(){

num++;

var tr = document.createElement('tr');

var td1 = document.createElement('td');

var td2 = document.createElement('td');

var td3 = document.createElement('td');

td1.innerHTML = 'xh00'+num;

td2.innerHTML = '第'+num+"位学生";

td3.innerHTML = "<a href='javascript:;' onclick='del(this)'>删除</a>";

var table = document.getElementById('table');

table.appendChild(tr);

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

var tr = document.getElementsByTagName('tr');

for(var i=0;i<tr.length;i++)

{

changeColor(tr[i]);

}

// 创建删除函数

function del(x){ //此处不能写成remove(x),js中remove()方法用于从下拉列表删除选项。

var tr = x.parentNode.parentNode;

tr.parentNode.removeChild(tr);

}

</script>

</head>

<body>

<center>

<table border="1" width="50%" id="table" style="text-align:center">

<tr>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

</tr>

<tr>

<td>xh001</td>

<td>王小明</td>

<td><a href="javascript:;" onclick="del(this)">删除</a></td> 

</tr>

<tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="del(this)">删除</a></td> 

</tr>

</table><br>

<input type="button" value="添加一行" onclick="add()" />

</center>

</body>

</html>