search

Home >Web Front-end >JS Tutorial >How to change the color of alternate rows in a javascript table and add mouse movement in and out and click effects_javascript skills

How to change the color of alternate rows in a javascript table and add mouse movement in and out and click effects_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:04:471883browse

The example in this article describes how to change the color of alternate rows in a javascript table and add mouse movement in and out and click effects. Share it with everyone for your reference. The specific analysis is as follows:

The table changes color every other row, which is also a js effect that improves user experience.

Effect implementation:

The odd and even rows of the table have different colors. This prevents users from seeing data serially.
The color changes when the mouse moves into a row, and changes back when the mouse moves out. This allows users to clearly know which line they are looking at.

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

Description:

i%2 Each number modulo 2 has only two values: 0 and 1, so that the effect of interlaced color change can be achieved
tables_li[i].onoff = 1; In order to achieve click color change, the color will not be overwritten when the mouse moves in and out.

Upload 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>无标题文档</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&#63;"#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&#63;"#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&#63;"#ace":"";
   }
  }
 }
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
 <tr>
 <td>1</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>2</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>3</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>4</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>5</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>6</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>7</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>8</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>9</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>10</td>
 <td>内容内容</td>
 </tr>
</table>
</body>
</html>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery plug-in Tooltipster implements beautiful tool tips_jqueryNext article：jQuery plug-in Tooltipster implements beautiful tool tips_jquery

Related articles

See more