SoFunction
Updated on 2025-02-28

Methods of changing color between interlaced rows and mouse movement in and out and clicking effects of javascript tables

This article describes the method of changing color between interlaced rows and mouse movement in and out and clicking effects of javascript tables. Share it for your reference. The specific analysis is as follows:

The color change of the table interlaced lines is also a js effect to improve the user experience.

Effects are realized:

The colors of the table's odd and even rows are different. This prevents users from serializing when viewing data.
When the mouse moves into a certain line, it changes color, then it changes back. This allows users to clearly know which line they are looking at.

Click to change color on the table. It is convenient for users to select items they want to keep.
 
illustrate:

i%2 The value of each number and 2 is used to take the modulus, and there are only two types of 0 and 1, so that the color change effect can be achieved by interlacing.
tables_li[i].onoff = 1;  In order to change color by clicking, the color will not be overwritten when the mouse is moved in and out.
 
Code above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>Untitled document</title>
<style>
table{
border-collapse:collapse
}
table td{
height:26px;
font-size:12px;
color:#333;
border:1px solid #09c;
text-align:center;
padding:0 10px;
}
</style>
</head>
<body>
<script>
 = function(){
 var tables = ("tables");
 var tables_li = ("tr");
 var i=0;
 var len = tables_li.length;
 for(i=0; i<len; i++){
  tables_li[i].onoff = 1;
  tables_li[i].index = i;
  tables_li[i]. = i%2?"#ace":"";
  tables_li[i].onmouseover = function(){
   if( == 1){
    = "#06c";
   }
  }
  tables_li[i].onmouseout = function(){
   if( == 1){
     = %2?"#ace":"";
   }
  }
  tables_li[i].onclick = function(){
   if( == 1){
     = 0;
     = "#069";
   }else{
     = 1;
     = %2?"#ace":"";
   }
  }
 }
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" >
 <tr>
 <td>1</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>4</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>5</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>6</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>7</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>8</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>9</td>
 <td>Content</td>
 </tr>
 <tr>
 <td>10</td>
 <td>Content</td>
 </tr>
</table>
</body>
</html>

I hope this article will be helpful to everyone's JavaScript programming.