這好像是周一還是周二的課堂作業

吃完午飯在思考這個東西怎么做

感覺超有感覺的

雖然不是很炫酷，但是效果很漂亮

<div>
javascript綜合練習二
</div>
<div>
<table>
<tr>
<th>序號</th><th>姓名</th><th>生日</th><th>性別</th><th>聯系電話</th><th>操作</th>
</tr>
<tr>
<td>1</td><td>張三</td><td>1992-03-03</td><td>男</td><td>13312345555</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>2</td><td>麗薩</td><td>1992-03-15</td><td>女</td><td>13312666234</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>3</td><td>王灣</td><td>1993-03-02</td><td>男</td><td>13312341488</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>4</td><td>張建軍</td><td>1996-12-03</td><td>男</td><td>13312341234</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>5</td><td>瑪娃</td><td>1992-05-03</td><td>女</td><td>13312341234</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>1</td><td>呵呵呵</td><td>1992-10-03</td><td>男</td><td>13312341234</td><td><a href="#">查看</a></td>
</tr>
</table>
</div>
<button οnclick="settable()">設置表格樣式</button>
<ul>表格要求:
<li>表格加上邊框,寬度為1px,直線,顏色#D3D3D3</li>
<li>表格總寬度800px, 第一行背景色為#87CEFA,后面的奇數行為#E0FFFF, 偶數行為#ADD8E6</li>
<li>鼠標移入到表格中,除了第一行以外,其它數據行背景色被變為#FFA07A,離開該行后顏色恢復</li>
</ul>


<script>
function settable(){
var mytable = document.getElementsByTagName('table')[0];

mytable.style.border = '1px solid #D3D3D3';
mytable.style.borderCollapse = 'collapse';
mytable.style.width = '800px';

for(var i=0; i<mytable.rows.length; i++){
//給出每行的背景色
if(i==0){
mytable.rows[0].style.backgroundColor = '#87CEFA';
}else{
// 每行在鼠標移入時改變背景色
mytable.rows[i].onmouseover = function(){
this.style.backgroundColor = '#FFA07A';
}


//設置奇數行和偶數行不同的背景色
if(i%2==0){
mytable.rows[i].style.backgroundColor = '#ADD8E6';
// 每行在鼠標移出時恢復背景色
mytable.rows[i].οnmοuseοut=function(){
this.style.backgroundColor = '#ADD8E6';
}
}else{
mytable.rows[i].style.backgroundColor = '#E0FFFF';
// 每行在鼠標移出時恢復背景色
mytable.rows[i].οnmοuseοut=function(){
this.style.backgroundColor = '#E0FFFF';
}
}
}


//給出格子的邊框
for(var j=0; j<mytable.rows[i].cells.length; j++){
mytable.rows[i].cells[j].style.border = '1px solid #D3D3D3';
}
}

}

轉載于:https://www.cnblogs.com/zhubaixue/p/6581108.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的鼠标移到某一行 某一行变色 鼠标移开恢复的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。