表格中鼠标移入时变色，移出又恢复

﹏ヽ暗。殇╰゛Y 2022-07-29 08:56 322阅读 0赞

<table style="widows:auto"> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;!DOCTYPE html&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;html&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;head lang="en"&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;meta charset="UTF-8"&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;title&gt;&lt;/title&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/head&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;body&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;table id="mytable" &gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;th&gt;序号&lt;/th&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;th&gt;性别&lt;/th&gt;&lt;th&gt;电话&lt;/th&gt;&lt;th&gt;地址&lt;/th&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;td&gt;1&lt;/td&gt;&lt;td&gt;张三&lt;/td&gt;&lt;td&gt;女&lt;/td&gt;&lt;td&gt;13312345678&lt;/td&gt;&lt;td&gt;四川省成都市&lt;/td&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;td&gt;2&lt;/td&gt;&lt;td&gt;李四&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;12999803382&lt;/td&gt;&lt;td&gt;四川省德阳市&lt;/td&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;td&gt;3&lt;/td&gt;&lt;td&gt;王五&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;13311955678&lt;/td&gt;&lt;td&gt;四川省乐山市&lt;/td&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;td&gt;4&lt;/td&gt;&lt;td&gt;赵六&lt;/td&gt;&lt;td&gt;女&lt;/td&gt;&lt;td&gt;13539412348&lt;/td&gt;&lt;td&gt;四川省成都市&lt;/td&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/tr&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/table&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;script&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>//将鼠标指向的那一行改变背景色，同时鼠标移开后恢复原本的背景色</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>window.οnlοad=function(){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>var mytable = document.getElementById("mytable");</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.style.borderCollapse="collapse";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.style.border="1px solid gray";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.style.width="800px";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.style.textAlign="center";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>for(i=0; i&lt;mytable.rows.length; i++){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>if(i==0){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.rows[0].style.backgroundColor="lightgray";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}else{ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.rows[i].style.cursor="pointer";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>//</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.rows[i].οnmοuseοver=function(){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>this.style.backgroundColor="lightyellow" ;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>if(i%2==0){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.rows[i].style.backgroundColor="yellow";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.rows[i].οnmοuseοut=function(){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>this.style.backgroundColor="yellow";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}else{ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.rows[i].style.backgroundColor="orange";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>mytable.rows[i].οnmοuseοut=function(){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>this.style.backgroundColor="orange";</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>for(j=0; j&lt;mytable.rows[i].cells.length; j++){ </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>var cell=mytable.rows[i].cells[j];</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>cell.style.border=mytable.style.border;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>}</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/script&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/body&gt;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 <td>&lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>