<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;
????????????????}
????????????}
????????}
????????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????????function?addLine(){
???????????//?alert("測試方法是否調用,果然還是管用的方法");
????????}
????????//?創建刪除函數
????????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循環走完之后再執行,所以此時 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';
?
????????????????}
????????????}
????????}
?
????????//?編寫一個函數，供添加按鈕調用，動態在表格的最后一行添加子節點；
????????function?addLine(){
???????????//?alert("測試方法是否調用,果然還是管用的方法");
????????}
????????//?創建刪除函數
????????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>望采納!
- 5 回答
- 1 關注
- 2482 瀏覽
添加回答
舉報
0/150
提交
取消