<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
window.onload = function(){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
this.count=2;
var tb=document.getElementById('table');
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function add(){
var ino=document.getElementById('ino');
ino.style.display='block';
console.log('ok');
}
function submit(){
this.count++;
var num=document.getElementById('number').value;
var nam=document.getElementById('name').value;
var gra=document.getElementById('grade').value;
var tb=document.getElementById('table');
var newtable=document.createElement('tr');
var tnum=document.createElement('td');
tnum.innerHTML=num;
var tnam=document.createElement('td');
tnam.innerHTML=nam;
var tgra=document.createElement('td');
tgra.innerHTML=gra;
var del=document.createElement('td');
var ahref=document.createElement('a');
ahref.innerHTML='delete';
ahref.href="javascript:dele(count)";
ahref.name='delete_table';
del.appendChild(ahref);
newtable.appendChild(tnum);
newtable.appendChild(tnam);
newtable.appendChild(tgra);
newtable.appendChild(del);
tb.appendChild(newtable);
ino.style.display='none';
}
function clear1(){
ino.style.display='none';
}
function dele(x){
var dels=document.getElementsByName('delete_table');
//console.log(dels);
var tables1=document.getElementsByTagName('tr');
console.log(tables1[x]);
var tb=document.getElementById('table');
//console.log(tb);
tb.removeChild(tables1[x]);
//console.log(tables[x]);
}
// 创建删除函数
</script>
<style type="text/css">
.in{
display: none;
}
</style>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>number</th>
<th>name</th>
<th>grade</th>
<th>opration</th>
</tr>
<tr>
<td>xh001</td>
<td>ming</td>
<td>100</td>
<td><a name='delete_table' href='javascript:dele(1)' >delete</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>fang</td>
<td>99</td>
<td><a name='delete_table' href="javascript:dele(2)" >delete</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="add" onclick='javascript:add()'/> <!--在添加按钮上添加点击事件 -->
<!--in div:-->
<div id='ino' class='in'>
student number:`<input type="text" id='number'/><br>
student name:<input type="text" id='name'/><br>
student grade:<input type="text" id='grade'/><br>
<input type="button" id='cl' value='clear' onclick='javascript:clear1()'/>
<input type="button" id='sub' value='submit' onclick='javascript:submit()'/><br>
</div>
</body>
</html>
