Javascript learning notes (10) form line-by-line color change, highlighted when the mouse passes

Source: Internet
Author: User
In web pages, the layout of tables is often visible. When the number of rows in a table is very large, it can easily lead to visual fatigue, and it is easy for users to read the data of the adjacent two rows. We can improve the user experience by changing the color of the line and highlighting it! If css is used, the front-end code is not elegant, for example, in the odd SyntaxHighlighter. all (); in the web page, the layout of the table is often visible. When there are many rows in the table, it is easy to cause visual fatigue, in addition, it is easy for users to misread data from two adjacent rows. We can improve the user experience by changing the color of the line and highlighting it! If css is used for implementation, the front-end code will be slightly less elegant. For example, we need to addThis code can be used to achieve line-by-line color change. If the webpage is dynamically output from the background, this cannot be implemented unless it is controlled by a program. Tr: hover is not supported in ie6. So we still cannot fully meet our requirements. Here we can use javascript to help us achieve the above requirements. It is mainly used to operate the DOM. First, check the HTML code: 
01     <h1> Member information table h1>
02     <table summary="user infomation table">
03         <thead>
04             <tr>
05                 <th> Member ID th>
06                 <th> Member name th>
07                 <th> Email th>
08                 <th> Member group th>
09                 <th> City th>
10                 <th> Registration Time th>
11              tr>
12          thead>
13         <tbody>
14             <tr>
15                 <td>126 td>
16              &nbs
Related Article

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.