在前端開發中經常見到隔行變色鼠標移入高亮顯示的效果，下面小編給大家分享基于js代碼實現的隔行變色鼠標移入高亮效果，廢話不多說了，具體代碼如下所示：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#table {width: 400px;border-collapse: collapse;}</style></head><body><table id="table" border="1"><thead><td>ID</td><td>姓名</td><td>年齡</td></thead><tbody><tr><td>1</td><td>黃藝</td><td>20</td></tr><tr><td>2</td><td>張三</td><td>21</td></tr><tr><td>3</td><td>李四</td><td>22</td></tr><tr><td>4</td><td>網無</td><td>23</td></tr></tbody></table></body><script type="text/javascript">// 實現隔行變色，鼠標移入高亮var table = document.getElementById("table");var oldColor = "";//聲明一個變量，保存表格原來的顏色for(var i = 0; i < table.tBodies[0].rows.length; i++) {//使用判斷實現隔行變色if(i % 2 == 0) {table.tBodies[0].rows[i].style.backgroundColor = "gray";} else {table.tBodies[0].rows[i].style.backgroundColor = "#ccc";}//實現鼠標移入高亮table.tBodies[0].rows[i].onmouseover = function() {oldColor = this.style.backgroundColor;this.style.backgroundColor = "red";}//實現鼠標移出變回原來的顏色table.tBodies[0].rows[i].onmouseout = function() {this.style.backgroundColor = oldColor;}}</script></html>以上所述是小編給大家介紹的純JS代碼實現隔行變色鼠標移入高亮，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
