亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

Javascript進階篇第九章最后一個編程的練習，該要一個怎么的思路，有點亂

編程練習

制作一個表格，顯示班級的學生信息。

要求：

1. 鼠標移到不同行上時背景色改為色值為 #f2f2f2，移開鼠標時則恢復為原背景色 #fff

2. 點擊添加按鈕，能動態在最后添加一行

3. 點擊刪除按鈕，則刪除當前行


正在回答

2 回答

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

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

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

其中加上計數器num，表示子元素個數。

0 回復 有任何疑惑可以回復我~ 
<!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(){
????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????????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'};
????????}
????????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????????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>學號</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>

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

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

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


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

Javascript進階篇第九章最后一個編程的練習，該要一個怎么的思路，有點亂

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號