Heim > Artikel > Web-Frontend > Beispielcode für jQuery, um die abwechselnde Änderung der Zeilenfarbe von Tabellen einfach zu realisieren und auf row color change_jquery zu klicken

Beispielcode für jQuery, um die abwechselnde Änderung der Zeilenfarbe von Tabellen einfach zu realisieren und auf row color change_jquery zu klicken

WBOYOriginal: 2016-05-16 09:00:261497Durchsuche

JQuery realisiert problemlos den Beispielcode zum Ändern der Farbe jeder zweiten Zeile der Tabelle und zum Ändern der Farbe der angeklickten Zeile

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用jquery设置表格样式</title>
<style>
.even{
 background-color:red;
}
.odd{
 background-color:green;
}
.selected{
 background-color:#FF6;
}
.se{
 background-color:#666;
}
</style>
<script language="javascript" src="../../include/jquery.js"></script>
<script>
$(document).ready(function(){
 //隔行表色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 
 //点击变色 
 $("tr").toggle(
 function(){
  
  $(this).addClass("selected");
  
 },function (){

  $(this).removeClass("selected");

 }
 );

 //滑动变色
 $("tr").mouseover(function (){
 
 $(this).addClass("se"); 
 
 }).mouseout(function (){
 
 $(this).removeClass("se");
 
 });
 

 
 
 
});
</script>
</head>

<body>
<table width="500" border="1" align="center">
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
 <tr>
  <td></td>
  <td> </td>
  <td> </td>
  <td> </td>
 </tr>
</table>


</body>
</html>

Der obige Beispielcode für jQuery zum einfachen Erkennen der Farbänderung von alternativen Zeilen und Klickzeilen einer Tabelle ist der gesamte vom Editor geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen .

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：Beispiel für einen halbtransparenten Maskenebeneneffekt auf der in JavaScript geschriebenen Seite. Klicken Sie hier, um das größere Bild anzuzeigen_Javascript-FähigkeitenNächster Artikel：Beispiel für einen halbtransparenten Maskenebeneneffekt auf der in JavaScript geschriebenen Seite. Klicken Sie hier, um das größere Bild anzuzeigen_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen