表格隔行换色
无js辅助：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <style> .tb { border-spacing: 0; border-collapse: collapse; margin: 0 auto; border: 1px black solid; } .tb thead th { display: inline-block; width: 150px; background-color: grey; border: 1px black solid; } .tb thead th:last-child { width: 100px; } .tb tbody tr:nth-child(odd) { background-color: #f5f5f5; } .tb tbody tr:nth-child(even) { background-color: lightblue; } .tb tbody tr td { display: inline-block; width: 150px; text-align: center; border: 1px black solid; } .tb tbody tr td:last-child { width: 100px; border-right: 0; border: 1px black solid; } </style> </head> <body> <table class="tb"> <thead> <th> 分类id </th> <th> 分类名称 </th> <th> 分类描述 </th> <th> 操作 </th> </thead> <tbody> <tr> <td> 1 </td> <td> 手机数码 </td> <td> 手机数码类商品 </td> <td> <a href="#"> 修改 </a> <span> | </span> <a href="#"> 删除 </a> </td> </tr> <tr> <td> 2 </td> <td> 电脑办公 </td> <td> 电脑办公类商品 </td> <td> <a href="#"> 修改 </a> <span> | </span> <a href="#"> 删除 </a> </td> </tr> <tr> <td> 3 </td> <td> 电脑办公 </td> <td> 电脑办公类商品 </td> <td> <a href="#"> 修改 </a> <span> | </span> <a href="#"> 删除 </a> </td> </tr> </tbody> </table> </body> </html>
有js辅助：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格隔行换色</title> <style> tr { text-align: center; } </style> </head> <body> <table id="tab" align="center" border="1" width="70%" style="border-collapse: collapse;"> <thead> <tr> <th>编号</th> <th>分类名称</th> <th>分类描述</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>手机数码</td> <td>手机数码</td> <td> <button>修改</button> <button>删除</button> </td> </tr> <tr> <td>1</td> <td>手机数码</td> <td>手机数码</td> <td> <button>修改</button> <button>删除</button> </td> </tr> </tbody> </table> <script type="text/javascript"> window.onload = function() { var tab = document.getElementById("tab"); // 表头颜色 tab.children[0].style.backgroundColor = "navajowhite"; // 表体颜色 var tbody = tab.tBodies[0]; for(var i = 0; i < tbody.children.length; i ++) { if(i % 2 == 0) { // 偶数行 tbody.children[i].style.backgroundColor = "skyBlue"; } else { // 奇数行 tbody.children[i].style.backgroundColor = "pink"; } } } </script> </body> </html>
