<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>階段練習(xí)9</title>
?<!--編程練習(xí)
????????制作一個(gè)表格，顯示班級(jí)的學(xué)生信息。
????????要求：
????????1.?鼠標(biāo)移到不同行上時(shí)背景色改為色值為?#f2f2f2，移開鼠標(biāo)時(shí)則恢復(fù)為原背景色?#fff
????????2.?點(diǎn)擊添加按鈕，能動(dòng)態(tài)在最后添加一行
????????3.?點(diǎn)擊刪除按鈕，則刪除當(dāng)前行-->
?<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">
?/**
?????????*?鼠標(biāo)移到不同行上時(shí)背景色改為色值為?#f2f2f2，移開鼠標(biāo)時(shí)則恢復(fù)為原背景色?#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++;
?//創(chuàng)建一行
?var?tr?=?document.createElement('tr');
?//創(chuàng)建單元格
?var?id?=?document.createElement('td');
?//為單元格賦值
?id.innerHTML="xsh000"+num;
?//創(chuàng)建單元格
?var?name?=?document.createElement('td');
?//為單元格賦值
?name.innerHTML="第"+num+"個(gè)學(xué)生";
?//創(chuàng)建單元格
?var?sex?=?document.createElement('td');
?//為單元格賦值
?sex.innerHTML="男";
?//創(chuàng)建單元格
?var?age?=?document.createElement('td');
?//為單元格賦值
?age.innerHTML=12+num;
?//創(chuàng)建單元格
?var?del?=?document.createElement('td');
?//為單元格賦值
?del.innerHTML="<a?href='javascript:'?onclick='deleteInfo(this);'>"+"刪除</a>";
?var?tb=document.getElementById('table');
?//添加子節(jié)點(diǎn)
?tb.appendChild(tr);
?//添加子節(jié)點(diǎn)
?tr.appendChild(id);
?//添加子節(jié)點(diǎn)
?tr.appendChild(name);
?//添加子節(jié)點(diǎn)
?tr.appendChild(sex);
?//添加子節(jié)點(diǎn)
?tr.appendChild(age);
?//添加子節(jié)點(diǎn)
?tr.appendChild(del);
?var?tr=document.getElementsByTagName('tr');
?for(var?i=0;i<tr.length;i++){
????????????????//改變行顏色
?changcolor(tr[i]);
?}
????????}
????????//刪除，但是第一行卻無(wú)法刪除，不知道為什么
?function?deleteInfo(obj){
????????????var?del=obj.parentNode.parentNode;
?del.parentNode.removeChild(del);
?}
????</script>
</head>
<body>
<div>
????<table?id='table'?summary="學(xué)生信息表">
????????<caption>學(xué)生信息表</caption>
????????<th>序號(hào)</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>
2018-02-19
this是一個(gè)對(duì)象，this具體指代的對(duì)象比較復(fù)雜，學(xué)到后面再理解，不過(guò)在你的代碼里，this指代的是a標(biāo)簽，所以a標(biāo)簽的父節(jié)點(diǎn)是td，td的父節(jié)點(diǎn)就是tr了，刪除函數(shù)把這個(gè)a標(biāo)簽的祖父（父父）節(jié)點(diǎn)聲明為對(duì)象，就可以用removeChild（）方法刪除了。
2018-02-18
沒(méi)有綁定點(diǎn)擊事件，在第一行a標(biāo)簽加個(gè)onclick="deleteInfo(this)"屬性。