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

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

WBOY

Freigeben： 2016-05-16 09:00:26

Original

1495 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 .