suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie JavaScript+CSS+DIV, um die Farbe der Tabelle zu ändern

So verwenden Sie JavaScript+CSS+DIV, um die Farbe der Tabelle zu ändern

一个新手
一个新手Original
2017-09-22 10:36:231710Durchsuche

Richten Sie eine Tabelle ein. Wenn die Maus zu einer bestimmten Zeile bewegt wird, ändert sich die Farbe. Jede Zeile erfordert zwei Mausereignisse:

1. Mausüberschreibung: onMouseOver

2. Maus aus: onMouseOut

Gleichzeitig müssen diese beiden Ereignisse die Ereignisfunktion aufrufen:

1. Implementieren Sie die Farbeinstellung der Zeile: 

resetColor(row)

2. Implementieren Sie die Änderung der Zeilenfarbe: 

changeColor(row)

Implementierungscode: 

<!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>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript+CSS+DIV, um die Farbe der Tabelle zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Über das Verständnis dieser Funktion in jsNächster Artikel：Über das Verständnis dieser Funktion in js

In Verbindung stehende Artikel

Mehr sehen