jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
非侵入实现,控制更方便
效果图:
效果图:
代码如下:
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript practice</title> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <style type="text/css"> table{width:300px;} caption{background:#DCA;} th{background:#FCA;width:50%;} td{text-align:center;} </style> <script type="text/javascript"> $(document).ready(function(){ odd= {"background":"#EDA","color":"#3F5"};//奇数样式 even={"background":"#2DA","color":"#875"};//偶数样式 odd_even("#table_test",odd,even); }); function odd_even(id,odd,even){ $(id).find("tr").each(function(index,element){ if(index%2==1) $(this).css(odd); else $(this).css(even); }); } </script> </head> <body> <table id="table_test"> <caption>标题<caption> <tr> <th>name</th> <th>age</th> </tr> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>张</td> <td>李</td> </tr> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>张</td> <td>李</td> </tr> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>张</td> <td>李</td> </tr> <tr> <td>张</td> <td>李</td> </tr> <tr> <td>A</td> <td>B</td> </tr></li> </body> </html>
相关推荐
89510194 2020-06-27
momode 2020-09-11
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18