Home >Web Front-end >JS Tutorial >Example code for using jQuery to change table row colors
This article will bring you a simple example of using JQ to change the color of alternate rows in a table. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
1. Step analysis:
The first step: Introduce the jquery class library
The second step: Directly write the page loading function
The third step : Directly use jquery's selector (combination selection) to get the elements that need to be operated (odd rows and even rows)
Step 4: Use the CSS method (css(name,value)) for odd rows respectively and even-numbered rows set the background color.
2. Specific code implementation:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> //1.页面加载 $(function(){ //2.获取tbody下面的偶数行并设置背景颜色 $("tbody tr:even").css("background-color","gold"); //3.获取tbody下面的奇数行并设置背景颜色 $("tbody tr:odd").css("background-color","pink"); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body> </html>
3. During actual development, the general CSS style has been written by the artist. At this time, you can use jquery’s CSS class operation
Specific code As follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="../css/style.css" rel="external nofollow" /> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> //1.页面加载 $(function(){ //2.获取tbody下面的偶数行并设置背景颜色 $("tbody tr:even").addClass("even"); //3.获取tbody下面的奇数行并设置背景颜色 $("tbody tr:odd").addClass("odd"); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body> </html>
Run it in Google Chrome to achieve the effect of changing the color of the table every other row.
Related recommendations:
How to use JavaScript’s % to do interlaced color changing
CSS interlaced color changing tutorial
How to use jstl to change the color of tables every other row
The above is the detailed content of Example code for using jQuery to change table row colors. For more information, please follow other related articles on the PHP Chinese website!