                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

第一行無法刪除，我也不到為啥

<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>階段練習9</title>
?<!--編程練習
????????制作一個表格，顯示班級的學生信息。
????????要求：
????????1.?鼠標移到不同行上時背景色改為色值為?#f2f2f2，移開鼠標時則恢復為原背景色?#fff
????????2.?點擊添加按鈕，能動態在最后添加一行
????????3.?點擊刪除按鈕，則刪除當前行-->
?<style?type="text/css">
?body?{
????????????font-family:?微軟雅黑;
?font-size:?15px;
?}

????????table?{
????????????text-align:?center;
?width:?800px;
?border:?2px?solid?black;
?}

????????caption?{
????????????background-color:?darkgray;
?border:?1px?solid?black;
?font-weight:?bold;
?font-size:?20px;
?}

????????th,?tr,?td?{
????????????border:?1px?solid?black;
?}

????????tr?{
????????????background-color:?#fff;
?}

????</style>
????<script?type="text/javascript">
?/**
?????????*?鼠標移到不同行上時背景色改為色值為?#f2f2f2，移開鼠標時則恢復為原背景色?#fff
?????????*/
?window.onload?=?function?mouse()?{
????????????var?tr?=?document.getElementsByTagName('tr');
?for?(var?i?=?0;?i?<?tr.length;?i++)?{
????????????????changcolor(tr[i]);
?}
????????}
????????function?changcolor(obj)?{
????????????obj.onmousemove?=?function?()?{
????????????????obj.style.backgroundColor?=?'#f2f2f2';
?}
????????????obj.onmouseout?=?function?()?{
????????????????obj.style.backgroundColor?=?'#fff';
?}
????????}
????????var?num?=?2;
?function?add()?{
????????????num++;
?//創建一行
?var?tr?=?document.createElement('tr');
?//創建單元格
?var?id?=?document.createElement('td');
?//為單元格賦值
?id.innerHTML="xsh000"+num;
?//創建單元格
?var?name?=?document.createElement('td');
?//為單元格賦值
?name.innerHTML="第"+num+"個學生";
?//創建單元格
?var?sex?=?document.createElement('td');
?//為單元格賦值
?sex.innerHTML="男";
?//創建單元格
?var?age?=?document.createElement('td');
?//為單元格賦值
?age.innerHTML=12+num;
?//創建單元格
?var?del?=?document.createElement('td');
?//為單元格賦值
?del.innerHTML="<a?href='javascript:'?onclick='deleteInfo(this);'>"+"刪除</a>";
?var?tb=document.getElementById('table');
?//添加子節點
?tb.appendChild(tr);
?//添加子節點
?tr.appendChild(id);
?//添加子節點
?tr.appendChild(name);
?//添加子節點
?tr.appendChild(sex);
?//添加子節點
?tr.appendChild(age);
?//添加子節點
?tr.appendChild(del);
?var?tr=document.getElementsByTagName('tr');
?for(var?i=0;i<tr.length;i++){
????????????????//改變行顏色
?changcolor(tr[i]);
?}
????????}
????????//刪除，但是第一行卻無法刪除，不知道為什么
?function?deleteInfo(obj){
????????????var?del=obj.parentNode.parentNode;
?del.parentNode.removeChild(del);
?}
????</script>
</head>
<body>
<div>
????<table?id='table'?summary="學生信息表">
????????<caption>學生信息表</caption>
????????<th>序號</th>
????????<th>姓名</th>
????????<th>性別</th>
????????<th>年齡</th>
????????<th>操作</th>
????????<tr>
????????????<td>xsh0001</td>
????????????<td>rock</td>
????????????<td>男</td>
????????????<td>21</td>
????????????<td><a?href="javascript:deleteInfo(this);">刪除</a></td>
????????</tr>
????????<tr>
????????????<td>xsh0002</td>
????????????<td>refain</td>
????????????<td>男</td>
????????????<td>20</td>
????????????<td><a?href="javascript:;"?onclick="deleteInfo(this)">刪除</a></td>
????????</tr>
????</table>
????<input?type="button"?value="添加一行"?onclick="add()">
</div>
</body>
</html>