基于jQuery的表格样式
时间: 2023-09-28 09:07:15 浏览: 90
下面是一个基于 jQuery 的表格样式的示例代码:
HTML:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>28</td>
</tr>
</tbody>
</table>
```
CSS:
```css
#myTable {
border-collapse: collapse;
width: 100%;
text-align: center;
}
#myTable th, #myTable td {
padding: 10px;
border: 1px solid #ddd;
}
#myTable th {
background-color: #f2f2f2;
font-weight: bold;
color: #333;
}
```
jQuery:
```javascript
$(document).ready(function() {
// 添加鼠标悬停效果
$("#myTable tbody tr").hover(function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
// 添加奇偶行颜色
$("#myTable tbody tr:odd").addClass("odd");
$("#myTable tbody tr:even").addClass("even");
});
```
在上面的代码中,我们使用了 jQuery 的 `hover()` 方法来添加鼠标悬停效果,使用了 `addClass()` 和 `removeClass()` 方法来添加奇偶行颜色。同时,我们还使用了 CSS 的 `border-collapse` 属性来去掉单元格之间的间隙,并使用了 `background-color` 和 `color` 属性来设置表头的背景色和文字颜色。