Of Stack

javascript table interleaved color change plus mouse in and out and click effect method

  • 2020-05-27 04:21:59
  • OfStack

In this paper, the example of javascript table interleaved color change and mouse move in and out and click the effect of the method. Share with you for your reference. The specific analysis is as follows:

Table interlaced color change is also an js effect to improve the user experience.

Effect realization:

The color of the odd and even rows of the table is different. This prevents the user from reading the data serially.
The mouse moves into a row to change color, out and back again. This lets the user clearly know which line they are looking at.

Click change color in the table. Make it easy for users to select items they want to keep.

Description:

i%2 takes modulo values for each number and 2, only 0 and 1, so that the interleaved color change effect can be achieved
tables_li [i] onoff = 1; In order to achieve click color change, the mouse moves in and out, the color is not covered.

The code: 


<!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=gb2312"/>
<title> Headless 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>
window.onload = function(){
 var tables = document.getElementById("tables");
 var tables_li = tables.getElementsByTagName("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].style.backgroundColor = i%2?"#ace":"";
  tables_li[i].onmouseover = function(){
   if(this.onoff == 1){
   this.style.backgroundColor = "#06c";
   }
  }
  tables_li[i].onmouseout = function(){
   if(this.onoff == 1){
    this.style.backgroundColor = this.index%2?"#ace":"";
   }
  }
  tables_li[i].onclick = function(){
   if(this.onoff == 1){
    this.onoff = 0;
    this.style.backgroundColor = "#069";
   }else{
    this.onoff = 1;
    this.style.backgroundColor = this.index%2?"#ace":"";
   }
  }
 }
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
 <tr>
 <td>1</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>2</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>3</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>4</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>5</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>6</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>7</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>8</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>9</td>
 <td> Content content </td>
 </tr>
 <tr>
 <td>10</td>
 <td> Content content </td>
 </tr>
</table>
</body>
</html>

I hope this article has been helpful to your javascript programming.

Related articles: