Using JavaScript to change color between rows

Table alternate color

requirement analysis

There is too much information about our product classification. If each line displays the same color, it will make people dazzled. In order to improve the user experience and reduce the user's mistake, we need to change color between lines in the table

technical analysis

table object
aggregate
Cells []: returns an array containing all cells in the table.
Rows []: returns an array containing all rows in the table.
tBodies []: returns an array containing all tBodies in the table.

Step analysis

  1. Confirm event: document loading complete onload
    2. Event to trigger function: init()
    3. Function: operate the elements of the page
    To manipulate each row in a table
    Dynamic background color of modified row

code implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script >
        function init(){
            //Get the table
            var tab = document.getElementById("tab");
            //Get each row in the table
            var rows = tab.rows;
            //Facilitate all rows, then according to odd even
            for(var i=1; i < rows.length; i++){
                var row = rows[i];  //Get a line
                if(i%2==0){
                    row.bgColor = "yellow";
                }else{
                    row.bgColor = "red"
                }
            }
        }
    </script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>classification ID</td>
        <td>Classification name</td>
        <td>Classified Goods</td>
        <td>Classification description</td>
        <td>operation</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>1</td>
        <td>Mobile digital</td>
        <td>HUAWEI,millet,Nikon</td>
        <td>Black horse digital products have the best quality</td>
        <td>
            <a href="#">modify</a>|<a href="#"> delete</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>2</td>
        <td>adult erotica products</td>
        <td>Inflatable</td>
        <td>Here's the inflatable electric silicone</td>
        <td><a href="#">modify</a>|<a href="#"> delete</a></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>3</td>
        <td>Computer office</td>
        <td>association,millet</td>
        <td>Notebook sale</td>
        <td><a href="#">modify</a>|<a href="#"> delete</a></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>4</td>
        <td>Greedy snacks</td>
        <td>Spicy strips,Hemp flowers,cucumber</td>
        <td>Special purchases for the Spring Festival</td>
        <td><a href="#">modify</a>|<a href="#"> delete</a></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>5</td>
        <td>bedding article</td>
        <td>Sheet,Quilt cover,Four piece suit</td>
        <td>It's all condoms</td>
        <td><a href="#">modify</a>|<a href="#"> delete</a></td>
    </tr>
</table>
</body>
</html>

Tags: Javascript Mobile Spring

Posted on Wed, 06 May 2020 08:34:48 -0700 by TropicalBeach