                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

Javascript進(jìn)階篇第九章最后一個(gè)編程的練習(xí)，該要一個(gè)怎么的思路，有點(diǎn)亂

編程練習(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)前行

wajf

2016-07-13

源自：JavaScript進(jìn)階篇 9-22

關(guān)注問(wèn)題我要回答

1354

操作

收起

2 回答

mtexiy_Sss
2016-07-13

補(bǔ)思路：1.第一步，改變顏色，首先找到你所要改變顏色的行，table的所有子元素有文本元素，過(guò)濾掉后就可以得到所要改變的行元素，最后定義一個(gè)改變顏色的函數(shù)，給每一行加上鼠標(biāo)移出移入的屬性；

2.第二步，給table元素添加子元素，并賦予各種屬性；

3.第三步，刪除table元素子元素；

其中加上計(jì)數(shù)器num，表示子元素個(gè)數(shù)。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

mtexiy_Sss
2016-07-13

<!DOCTYPE?html>
<html>
<head>
????<title>?new?document?</title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>
????<script?type="text/javascript">
????????num?=?0;
????????window.onload?=?function(){
????????????//?鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
????????????var?table?=?document.getElementById("table");
????????????var?trs=?table.childNodes[1].childNodes;
????????????for(var?i?=0;i<trs.length;i++){
????????????????if(trs[i].nodeType?==?1){
????????????????????num?+=1;
????????????????????addmouse(trs[i]);
????????????????}
????????????}
????????}
????????function?addmouse(tr){
????????????tr.onmouseover=function(){this.style.background='#f2f2f2'};
????????????tr.onmouseout=function(){this.style.background='#fff'};
????????}
????????//?編寫一個(gè)函數(shù)，供添加按鈕調(diào)用，動(dòng)態(tài)在表格的最后一行添加子節(jié)點(diǎn)；
????????function?add_line(){
????????????var?table?=?document.getElementById("table");
????????????var?newnode?=?document.createElement("tr");
????????????var?newtd?=?document.createElement("td");
????????????newtd.innerHTML?=?"xh"+num;
????????????newnode.appendChild(newtd);
????????????var?newtd?=?document.createElement("td");
????????????newtd.innerHTML?=?"name"+num;
????????????newnode.appendChild(newtd);
????????????var?newtd?=?document.createElement("td");
????????????var?newa=document.createElement("a");
????????????newa.href?=?"#";
????????????newa.onclick=function(){deltr(this);};
????????????newa.innerHTML?=?"刪除"
????????????newtd.appendChild(newa);
????????????newnode.appendChild(newtd);
????????????addmouse(newnode);
????????????table.appendChild(newnode);
????????????num?+=?1;
????????}
????????function?deltr(a){
????????????tr?=?a.parentNode.parentNode;
????????????//alert(tr.innerHTML);
????????????x?=?tr.parentNode.removeChild(tr);
????????????x=null;
????????????num?-=?1;
????????}



????</script>
</head>
<body>
<table?border="1"?width="50%"?id="table">
????<tr>
????????<th>學(xué)號(hào)</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>

????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="#"?onclick="deltr(this)">刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>

????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="#"?onclick="deltr(this)"?>刪除</a></td>???<!--在刪除按鈕上添加點(diǎn)擊事件??-->
????</tr>

</table>
<input?type="button"?value="添加一行"??onclick="add_line()"/>???<!--在添加按鈕上添加點(diǎn)擊事件??-->
</body>
</html>