<!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(){
?????????
?????//?鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
????????
??????this.count=2;
?????var?tb=document.getElementById('table');
???
???}
?????
??????//?編寫一個函數(shù)，供添加按鈕調(diào)用，動態(tài)在表格的最后一行添加子節(jié)點；
?????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]);
????}
?????
?????//?創(chuàng)建刪除函數(shù)
?????
?????
??</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>
2016-11-18
??var?tb=document.getElementById('table').children[0]因為table下面必定會有tbody，即使你沒寫