首頁猿問我設置的背景顏色為什么不顯示呢?...

我設置的背景顏色為什么不顯示呢? ---------js進階9-22編程練習.

Html5

bestDove 2016-06-18 14:47:50

<html> <head> ????<title>?new?document?</title> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"> ????<script?type="text/javascript"> ????????window.onload?=?function(){ ????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。 ????????????//獲取每一行 ????????????var?line?=?document.getElementsByTagName("tr"); ????????????for(var?i?=?0;i?<?line.length?;i++) ????????????{ ????????????????line[i].onmouseover?=?function() ????????????????{ ?????????????????//???alert("測試下鼠標滑過這行有動靜嗎?"); ????????????????????line[i].style.backgroundColor?=?red; ????????????????} ????????????????line[i].onmouseout?=?function() ????????????????{ ??????????????????//??alert("測試過鼠標滑出時候的動靜"); ???????????????????line[i].style.backgroundColor?=?yellow; ????????????????} ????????????} ????????} ????????//?編寫一個函數，供添加按鈕調用，動態(tài)在表格的最后一行添加子節(jié)點； ????????function?addLine(){ ???????????//?alert("測試方法是否調用,果然還是管用的方法"); ????????} ????????//?創(chuàng)建刪除函數 ????????function?remo(){ ????????????//獲取所在行 ????????????//刪除所在行 ????????????//?alert("測試方法是否調用,果然還是管用的方法"); ????????} ????</script> </head> <body> <table?border="7"?width="50%"?id="table"> ????<tr> ????????<th>學號</th> ????????<th>姓名</th> ????????<th>操作</th> ????</tr> ????<tr> ????????<td>xh001</td> ????????<td>王小明</td> ????????<td><a?href="javascript:remo();"?>刪除</a></td>??? ????</tr> ????<tr> ????????<td>xh002</td> ????????<td>劉小芳</td> ????????<td><a?href="javascript:remo();"?>刪除</a></td>??? ????</tr> </table> <input?type="button"?value="添加一行"?onclick?="addLine()"??/>??? </body> </html>問題:19行和24行的顏色設置不成功.希望實現的是:當鼠標滑進每一行的時候該行背景顏色改變,滑出這一行的時候背景顏色也改變.

查看完整描述

5 回答

已采納

剛毅87

TA貢獻345條經驗獲得超309個贊

總共有兩處錯誤

鼠標事件是在 for循環(huán)走完之后再執(zhí)行,所以此時 i= line.length. 并不存在,所以用 this 代指 line[i].
顏色要用引號括起來

代碼如下

<html>
<head>
????<title>?new?document?</title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
????<script?type="text/javascript">
?
????????window.onload?=?function(){
?
????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????????//獲取每一行
????????????var?line?=?document.getElementsByTagName("tr");
?
????????????for(var?i?=?0;i?<?line.length?;i++)
????????????{
????????????????line[i].onmouseover?=?function()
????????????????{
?????????????????//???alert("測試下鼠標滑過這行有動靜嗎?");
????????????????????this.style.backgroundColor?=?'red';
????????????????}
????????????????line[i].onmouseout?=?function()
????????????????{
??????????????????//??alert("測試過鼠標滑出時候的動靜");
???????????????????this.style.backgroundColor?=?'yellow';
?
????????????????}
????????????}
????????}
?
????????//?編寫一個函數，供添加按鈕調用，動態(tài)在表格的最后一行添加子節(jié)點；
????????function?addLine(){
???????????//?alert("測試方法是否調用,果然還是管用的方法");
????????}
????????//?創(chuàng)建刪除函數
????????function?remo(){
????????????//獲取所在行
????????????//刪除所在行
????????????//?alert("測試方法是否調用,果然還是管用的方法");
????????}
?
?
????</script>
</head>
<body>
<table?border="7"?width="50%"?id="table">
?
????<tr>
????????<th>學號</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>
?
????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="javascript:remo();"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
?
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="javascript:remo();"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
?
</table>
<input?type="button"?value="添加一行"?onclick?="addLine()"??/>???<!--在添加按鈕上添加點擊事件??-->
</body>
</html>

望采納!

4 反對回復 2016-06-18