cari

Rumah >hujung hadapan web >tutorial js >如何用JavaScript+CSS+DIV实现表格变色

如何用JavaScript+CSS+DIV实现表格变色

一个新手
一个新手asal
2017-09-22 10:36:231733semak imbas

  设置一个表格，当鼠标移动到某行时，颜色改变，鼠标离开时，颜色变为原来的样子。每一行都要两个鼠标事件：

1.鼠标覆盖：onMouseOver

2.鼠标离开：onMouseOut

  同时这两个事件需要调用事件函数：

1.实现对行的颜色设置：

resetColor(row)

2.实现对行颜色的改变：

changeColor(row)

实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
  <head>
    <title>变色表格示例</title>
	<script type="text/javascript">
	function changeColor(row){
	 document.getElementById(row).style.backgroundColor=&#39;#9999FF&#39;;
	}
	function resetColor(row){
	document.getElementById(row).style.backgroundColor=&#39;&#39;;
	}
	</script>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
  <table width="200" border="1" cellspacing="1" cellpadding="1" align="center">
  <tr><th>学校</th><th>专业</th><th>人数</th></tr>
  <tr align="center" id="row1" onMouseOver="changeColor(&#39;row1&#39;)"
   onMouseOut="resetColor(&#39;row1&#39;)">
   <th>北大</th><th>法律</th><th>2000</th>
   </tr>
   <tr align="center" id="row2" onMouseOver="changeColor(&#39;row2&#39;)"
    onMouseOut="resetColor(&#39;row2&#39;)">
    <th>清华</th><th>计算机</th><th>5000</th>
   </tr>
   <tr align="center" id="row3" onMouseOver="changeColor(&#39;row3&#39;)"
    onMouseOut="resetColor(&#39;row3&#39;)">
    <th>人大</th><th>经济</th><th>6000</th>
    </tr>
  </table>
  </body>
</html>

Atas ialah kandungan terperinci 如何用JavaScript+CSS+DIV实现表格变色. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于js函数中this的理解Artikel seterusnya：Cookie/Session机制介绍

Artikel berkaitan

Lihat lagi