鼠标经过表格行变色
表格表头为蓝色，表主体为白色，当鼠标放到表的非表头行时，这一行颜色变为黄色，鼠标离开时黄色消失。
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标经过表格变色</title><style>table {margin: 200px auto;font-size: 12px;border-collapse: collapse;width: 500px;height: 50px;}table thead tr {font-size: 14px;background-color: skyblue;}td {border: 1px solid black; }.bgc{background-color: yellow;}</style></head><body><table><thead><td>表头1</td><td>表头2</td><td>表头3</td></thead><tbody><tr><td>表格一行一列</td><td>表格一行二列</td><td>表格一行三列</td></tr><tr><td>表格二行一列</td><td>表格二行二列</td><td>表格二行三列</td></tr><tr><td>表格三行一列</td><td>表格三行二列</td><td>表格三行三列</td></tr><tr><td>表格四行一列</td><td>表格四行二列</td><td>表格四行三列</td></tr><tr><td>表格五行一列</td><td>表格五行二列</td><td>表格五行三列</td></tr></tbody></table><script>var tr =document.querySelectorAll('tr');for(var i = 0;i < tr.length ;i++){tr[i].onmouseover = function(){this.className = 'bgc';}tr[i].onmouseout = function(){this.className = '';}}</script></body></html>
