使用jQuery对表格进行操作:(1)奇偶行颜色不同;(2)表格内容筛选:对表格中的某些数据进行高亮度显示;(3)鼠标移动到某行,某行更换背景颜色。(4)选做:通过Ajax方法获取静态文件JSON数据并填充到表格中。
时间: 2024-05-10 17:17:19 浏览: 79
以下是使用jQuery对表格进行操作的代码实现:
HTML代码:
```html
<table id="myTable">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>Canada</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>Australia</td>
</tr>
<tr>
<td>Mary</td>
<td>35</td>
<td>UK</td>
</tr>
</table>
```
CSS样式:
```css
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
}
tr:nth-child(odd) {
background-color: #f2f2f2;
}
.highlight {
background-color: yellow;
}
```
jQuery代码:
```javascript
// 奇偶行颜色不同
$('#myTable tr:odd').css('background-color', '#f2f2f2');
// 表格内容筛选
$('#myTable td:contains("USA")').addClass('highlight');
// 鼠标移动到某行,某行更换背景颜色
$('#myTable tr').hover(
function() {
$(this).addClass('highlight');
},
function() {
$(this).removeClass('highlight');
}
);
// Ajax方法获取静态文件JSON数据并填充到表格中
$.getJSON('data.json', function(data) {
$.each(data, function(index, item) {
var row = '<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.country + '</td></tr>';
$('#myTable').append(row);
});
});
```
其中,第一行代码实现了奇偶行颜色不同的效果,使用了`:odd`选择器来选中奇数行;第二行代码实现了表格内容筛选的效果,使用了`:contains`选择器来选中包含指定内容的单元格,并添加`highlight`类来实现高亮度显示;第三行代码实现了鼠标移动到某行,某行更换背景颜色的效果,使用了`hover`方法来绑定鼠标移入和移出事件,并添加或移除`highlight`类来改变背景颜色;最后一行代码实现了通过Ajax方法获取静态文件JSON数据并填充到表格中的效果,使用了`getJSON`方法来获取JSON数据,并使用`each`方法遍历数据,然后通过字符串拼接的方式生成HTML代码,并添加到表格中。
阅读全文