Using JQuery to complete the color change of the interlaced table

Js related technology

Get all rows
​ table.rows[]

Change the color of the row
​ row.bgColor ="red"
​ row.style.backgroundColor = "black"
​ row.style.background = "red"
​ "background-color:red"
​ "background:red"

requirement analysis

In our actual development process, if all the rows of our table are the same, it's easy to see eye candy, so we need to change the color of our table between rows

technical analysis

Get all rows table.rows
Traverse all rows
Modify the background color of each line according to the line number: bgColor

​ style.backgroundColor = "red"

Step analysis

  1. Package to import JQ
  2. Document loading completion function: page initialization
  3. Get all rows: element selector
  4. Change color according to line number

code implementation

	<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script>
        $(function(){
            $("tr:even:gt(0)").css("background-color", "red")
            $("tr:odd").css("background-color", "yellow")
        });
    </script>
</head>
<body >
<table border="1px" width="600px" id="tab">
    <tr>
        <td>
            <input type="checkbox" checked="checked"/>
        </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 JQuery Mobile Spring

Posted on Wed, 06 May 2020 07:19:41 -0700 by jmoreno