(3) 利用JQuery完成如下界面设计要求,在index.html页面中展示的效果如下:(要求隔行变色) 设备号 设备名称 设备价格 设备厂家 设备备注 20092680 PC机 3000 联想 教师机 20092681 交换机 3500 神州数码 组建教学局域网 20092682 智能终端 5000 新大陆 环境温度采集
时间: 2024-03-26 11:39:59 浏览: 64
jquery-3.7.0.min.js(jQuery下载)
这里是一个示例代码,可以实现表格隔行变色并展示数据:
```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>
</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>
<script type="text/javascript">
$(document).ready(function(){
// 表格隔行变色
$("table tr:nth-child(even)").css("background-color", "#f2f2f2");
});
</script>
</body>
</html>
```
你可以将这段代码复制粘贴到 `index.html` 文件中,然后打开浏览器查看效果。
阅读全文