JavaScript table interlace Color add mouse to move out and click the effect of the method

Source: Internet
Author: User

Forms of interlacing color, but also a user experience to improve the JS effect.

Effect implementation:

The color of the form's odd and even rows is different. This prevents users from viewing the data serially.
When the mouse moves in a row, it changes color, and then it comes back. This allows the user to know exactly which line they are looking at.

Table click Color. Makes it easy for users to select the items they want to keep.

Description

i%2 each number and 2 modulo values, only 0 and 12, so you can achieve the effect of interlacing colors
Tables_li[i].onoff = 1; In order to achieve the click Color, the mouse moves into the move out, the colors are not covered.

Code on:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88 89 90 91 92 93 94 95 96 97-98 <! 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> 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> window.onload = function () {var tables = Document.getelementby Id ("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].onmouse out = 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= "border=" 0 "align=" center "cellpadding=" 0 "cellspacing=" 0 "id=" Tables "> <tr > <td>1</td> <td> content </td> </tr> <tr> <td>2</td> <td> content 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 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 content </td> </tr> <tr> <td>9</td> <td> content </td> </tr> <tr> <td>10</td> <td> content </td> </tr> </table> </body> </html>
Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.