html筛选查询内容代码怎么写
时间: 2024-04-16 11:09:35 浏览: 16
你可以使用JavaScript或jQuery来实现HTML筛选查询内容。以下是一个示例代码:
HTML:
```
<input type="text" id="searchInput" placeholder="搜索...">
<ul id="list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>草莓</li>
<li>樱桃</li>
</ul>
```
JavaScript:
```javascript
$(document).ready(function(){
$('#searchInput').on('keyup', function(){
var value = $(this).val().toLowerCase();
$('#list li').filter(function(){
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
```
这段JavaScript代码监听搜索框输入的内容,将输入的内容转换为小写字母,然后通过筛选列表中的每个li标签,判断是否包含输入的内容,如果包含则显示,否则隐藏。
相关问题
html图片瀑布流分类筛选代码
以下是一个简单的基于HTML、CSS和JavaScript的图片瀑布流分类筛选代码示例:
HTML代码:
```html
<div class="filter-buttons">
<button class="filter-button" data-filter="all">全部</button>
<button class="filter-button" data-filter="nature">自然</button>
<button class="filter-button" data-filter="animals">动物</button>
<button class="filter-button" data-filter="food">美食</button>
</div>
<div class="gallery">
<div class="gallery-item nature">
<img src="nature1.jpg" alt="自然1">
</div>
<div class="gallery-item animals">
<img src="animals1.jpg" alt="动物1">
</div>
<div class="gallery-item nature">
<img src="nature2.jpg" alt="自然2">
</div>
<div class="gallery-item food">
<img src="food1.jpg" alt="美食1">
</div>
<div class="gallery-item animals">
<img src="animals2.jpg" alt="动物2">
</div>
<div class="gallery-item food">
<img src="food2.jpg" alt="美食2">
</div>
</div>
```
CSS代码:
```css
.gallery {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.gallery-item {
width: 33.33%;
padding: 10px;
}
.gallery-item img {
width: 100%;
height: auto;
}
.filter-buttons {
margin-bottom: 20px;
}
.filter-button {
padding: 8px 16px;
border: none;
border-radius: 5px;
background-color: #f2f2f2;
margin-right: 10px;
cursor: pointer;
}
.filter-button.active {
background-color: #4CAF50;
color: white;
}
```
JavaScript代码:
```javascript
const filterButtons = document.querySelectorAll('.filter-button');
const galleryItems = document.querySelectorAll('.gallery-item');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
const filter = button.dataset.filter;
filterButtons.forEach(button => {
button.classList.remove('active');
});
button.classList.add('active');
galleryItems.forEach(item => {
if (filter === 'all' || item.classList.contains(filter)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
});
```
这段代码创建了四个分类筛选按钮,分别对应“全部”、“自然”、“动物”和“美食”四个类别。当用户单击其中一个按钮时,JavaScript代码会根据按钮的数据过滤器属性显示或隐藏相应的图库项。CSS代码为图库项提供了基本的样式和布局。
jq实现html表格内容筛选
可以使用jq的筛选器来实现html表格内容筛选。以下是一个示例代码:
```html
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
<td>USA</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
<td>Canada</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>UK</td>
</tr>
</tbody>
</table>
```
如果想要筛选出年龄小于等于30岁的人员信息,可以使用以下代码:
```javascript
$("table tbody tr").filter(function() {
return $(this).find("td:nth-child(2)").text() <= 30;
}).addClass("highlight");
```
这段代码会将年龄小于等于30岁的人员信息高亮显示。你可以根据自己的需求修改筛选条件和高亮方式。