<!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>??
??<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>???
??<script?type="text/javascript">?
??
??????window.onload?=?function(){
??????????????????
?????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????var?list?=?document.getElementsByTagName("tr")
????????for(var?i?=?0;?i?<?list.length;?i++){
????????????list[i].onmouseover?=?function(){
????????????????this.style.backgroundColor?=?"red"
????????????}
????????????list[i].onmouseout?=?function(){
????????????????this.style.backgroundColor?=?"white"
????????????}
????????}
?????
?
?}
?????
??????//?編寫一個函數(shù),供添加按鈕調用,動態(tài)在表格的最后一行添加子節(jié)點;
?????
????
??? ?
?????//?創(chuàng)建刪除函數(shù)
?????
??</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="javascript:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>
???<tr>
<td>xh002</td>
<td>劉小芳</td>
<td><a?href="javascript:;"?>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
???</tr>??
???</table>
???<input?type="button"?value="添加一行"??/>???<!--在添加按鈕上添加點擊事件??-->
?</body>
</html>
2016-12-02
用list[i] 和用this本質是一樣的,你去運行一下就知道了。list[i]并不是整個表格,就是那一列。
2016-12-01
應為this獲取的是當前對象。
var tbody = document.getElementById('table').lastChild;這里獲取的是整個表格
如果你把this.style.backgroundColor ="#f2f2f2";改成這樣tbody.style.backgroundColor ="#f2f2f2";那整個表格就起作用了。
function Highlight(){
var tbody = document.getElementById('table').lastChild;
trs = tbody.getElementsByTagName('tr'); //獲取表格的行 ?
for(var i =1;i<trs.length;i++){ ? ? ? ? //然后遍歷每個行存放在數(shù)組trs[i]中
trs[i].onmouseover = function(){ ? ?//此時這里的trs[i]就相當于對象了(因為數(shù)組本身是對象)
this.style.backgroundColor ="#f2f2f2";//this是調用當前對象的(當鼠標放到哪一行,當前這一行就會觸發(fā)事件了)
}?
trs[i].onmouseout = function(){
this.style.backgroundColor ="#fff";
}?
} ?
}
我水平本身也有限,希望能幫到你