首页(3) 利用JQuery完成如下界面设计要求，在index.html页面中展示的效果如下：（要求隔行变色）厂家一设备号设备名称设备价格设备厂家设备备注厂家二 20092680 PC机 3000 联想教师机厂家三 20092681 交换机 3500 神州数码组建教学局域网 20092682 智能终端 5000 新大陆环境温度采集

(3) 利用JQuery完成如下界面设计要求，在index.html页面中展示的效果如下：（要求隔行变色）厂家一设备号设备名称设备价格设备厂家设备备注厂家二 20092680 PC机 3000 联想教师机厂家三 20092681 交换机 3500 神州数码组建教学局域网 20092682 智能终端 5000 新大陆环境温度采集

时间: 2024-03-26 22:39:56 浏览: 65

这里是一个示例代码，可以实现表格隔行变色并展示数据： ```html <!DOCTYPE html> <html> <head> <title>设备列表</title> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> table { border-collapse: collapse; width: 100%; text-align: center; } table th, table td { border: 1px solid #ddd; padding: 8px; } table th { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #f2f2f2; } </style> </head> <body> <table> <thead> <tr> <th>厂家</th> <th>设备号</th> <th>设备名称</th> <th>设备价格</th> <th>设备厂家</th> <th>设备备注</th> </tr> </thead> <tbody> <tr> <td>厂家二</td> <td>20092680</td> <td>PC机</td> <td>3000</td> <td>联想</td> <td>教师机</td> </tr> <tr> <td>厂家三</td> <td>20092681</td> <td>交换机</td> <td>3500</td> <td>神州数码</td> <td>组建教学局域网</td> </tr> <tr> <td>厂家三</td> <td>20092682</td> <td>智能终端</td> <td>5000</td> <td>新大陆</td> <td>环境温度采集</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready(function(){ // 表格隔行变色 $("table tr:nth-child(even)").css("background-color", "#f2f2f2"); }); </script> </body> </html> ``` 你可以将这段代码复制粘贴到 `index.html` 文件中，然后打开浏览器查看效果。

阅读全文