javaScript+CSS实现表格变色

最新推荐文章于 2025-04-25 16:12:41 发布

zzsyzxzm

最新推荐文章于 2025-04-25 16:12:41 发布

阅读量411

点赞数

分类专栏： javascript 文章标签： javascript css function border table html

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的HTML表格示例，并使用JavaScript实现了鼠标悬停时改变表格行背景颜色的效果。表格展示了三所知名大学及其热门专业的学生人数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
    <head>
        <title>变色表格示例</title>
		<script language="javascript">
		    function changeColor(row)
			{
			    document.getElementById(row).style.backgroundColor='#CCCCFF';
			}			
			 function resetColor(row)
			{
			    document.getElementById(row).style.backgroundColor='';
			}
		</script>
    </head>
    <body>
    <table width="200" border="1" cellspacing="1" cellpadding="1">
     <tr>
        <th>学校</th>
        <th >专业</th>
        <th>人数</th>
     </tr>
     <tr align="center" id="row1" onMouseOver="changeColor('row1')" onMouseOut="resetColor('row1')">
        <td>北大</td>
        <td>法律</td>
        <td>2000</td>
     </tr> 
    <tr align="center" id="row2" onMouseOver="changeColor('row2')" onMouseOut="resetColor('row2')"> 
       <td>清华</td>
       <td>计算机</td>
       <td>5000</td>
    </tr>
	 <tr align="center" id="row3" onMouseOver="changeColor('row3')" onMouseOut="resetColor('row3')"> 
       <td>人大</td>
       <td>经济</td>
       <td>6000</td>
    </tr>
</table>
</body>
</html>