(3) 利用JQuery完成如下界面设计要求,在index.html页面中展示的效果如下:(要求隔行变色) 设备号 设备名称 设备价格 设备厂家 设备备注 20092680 PC机 3000 联想 教师机 20092681 交换机 3500 神州数码 组建教学局域网 20092682 智能终端 5000 新大陆 环境温度采集
时间: 2024-03-26 07:38:41 浏览: 17
可以使用如下的HTML代码和JQuery实现该界面设计要求:
HTML代码:
```
<table id="deviceTable">
<thead>
<tr>
<th>设备号</th>
<th>设备名称</th>
<th>设备价格</th>
<th>设备厂家</th>
<th>设备备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>20092680</td>
<td>PC机</td>
<td>3000</td>
<td>联想</td>
<td>教师机</td>
</tr>
<tr>
<td>20092681</td>
<td>交换机</td>
<td>3500</td>
<td>神州数码</td>
<td>组建教学局域网</td>
</tr>
<tr>
<td>20092682</td>
<td>智能终端</td>
<td>5000</td>
<td>新大陆</td>
<td>环境温度采集</td>
</tr>
</tbody>
</table>
```
JQuery代码:
```
$(document).ready(function() {
// 隔行变色
$("#deviceTable tbody tr:even").addClass("even");
});
```
CSS代码:
```
.even {
background-color: #d9edf7;
}
```
这样就可以实现隔行变色的效果了。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)