我有一个使用 jQuery 工作的表格和多个过滤器搜索。过滤器支持相关搜索。
我需要实现一个过滤器来搜索间隔日期（开始日期、结束日期）和一个过滤器来搜索所选年份，过滤器需要与其他过滤器相关。
输入过滤器需要输入“include”而不是像现在这样的“equals”。
我是 jquery 的新手，有人可以帮忙得到结果吗？
我的 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank Holidays</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/889e9318b0.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr class="filters">
<th>
<div id="1">
<div class="input-group">
<label for="exampleFormControlInput1" class="form-label col-md-6">Ricerca per:</label>
<select id="1" style="margin-bottom: 2%;" class="form-select form-select-sm" onchange="openInput(event,'data-filter');" aria-label="Default select example">
<option selected>Data</option>
<option value="year">Anno</option>
<option value="range">Intervallo di date</option>
</select>
</div>
<input id="data-filter" class="form-control form-control" type="date"/>
</div>
<!--<select id="assigned-user-filter" class="form-control">
<option>None</option>
<option>Natale</option>
<option>Pasqua</option>
<option>Ferragosto</option>
<option>Pasquetta</option>
<option>2 Giugno</option>
</select>-->
</th>
<th>Descrizione
<div>
<input id="descrizione-filter" class="form-control" type="text">
<!--<select id="descrizione-filter" class="form-control">
<option>Any</option>
<option>Natale</option>
<option>Pasqua</option>
<option>Ferragosto</option>
<option>Pasquetta</option>
<option>Capodanno</option>
</select>-->
</th>
<th>Luogo
<select id="luogo-filter" class="form-control">
<option>Tutti</option>
<option>Nazionale</option>
<option>Roma</option>
<option>Milano</option>
<option>Berlino</option>
</select>
</th>
<th>Nazione
<select id="nazione-filter" class="form-control">
<option>Tutti</option>
<option>Italia</option>
<option>Francia</option>
<option>Germania</option>
</select>
</th>
</tr>
</div>
</thead>
</table>
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Tasks</h3>
<div class="pull-right"></div>
</div>
<table id="task-list-tbl" class="table">
<thead>
<tr>
<th>Data</th>
<th>Descrizione</th>
<th>Luogo</th>
<th>Nazione</th>
<th></th>
</tr>
</thead>
<tbody>
<tr
class="task-list-row"
data-data="25/12/2025"
data-descrizione="Natale"
data-luogo="Nazionale"
data-nazione="Francia">
<td>25/12/2025</td>
<td>Natale</td>
<td>Nazionale</td>
<td>Francia</td>
<td><a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-whatever="Modifica">Modifica</a>
|
<a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#deleteModal" data-bs-whatever="Elimina">Elimina</a>
</td>
</tr>
<tr
class="task-list-row"
data-data="25/12/2025"
data-descrizione="Natale"
data-luogo="Nazionale"
data-nazione="Italia">
<td>25/12/2025</td>
<td>Natale</td>
<td>Nazionale</td>
<td>Italia</td>
<td><a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-whatever="Modifica">Modifica</a>
|
<a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#deleteModal" data-bs-whatever="Elimina">Elimina</a>
</td>
</tr>
<tr
class="task-list-row"
data-data="25/12/2025"
data-descrizione="Natale"
data-luogo="Nazionale"
data-nazione="Germania">
<td>25/12/2025</td>
<td>Natale</td>
<td>Nazionale</td>
<td>Germania</td>
<td><a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-whatever="Modifica">Modifica</a>
|
<a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#deleteModal" data-bs-whatever="Elimina">Elimina</a>
</td>
</tr>
<tr
class="task-list-row"
data-data="25/12/2025"
data-descrizione="Festa di Berlino"
data-luogo="Berlino"
data-nazione="Germania">
<td>25/12/2025</td>
<td>Festa di Berlino</td>
<td>Berlino</td>
<td>Germania</td>
<td><a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-whatever="Modifica">Modifica</a>
|
<a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#deleteModal" data-bs-whatever="Elimina">Elimina</a>
</td>
</tr>
<tr
class="task-list-row"
data-data="01/01/2025"
data-descrizione="Capodanno"
data-luogo="Nazionale"
data-nazione="Germania">
<td>01/01/2025</td>
<td>Capodanno</td>
<td>Nazionale</td>
<td>Germania</td>
<td><a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-whatever="Modifica">Modifica</a>
|
<a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#deleteModal" data-bs-whatever="Elimina">Elimina</a>
</td>
</tr>
<tr
class="task-list-row"
data-data="25/12/2025"
data-descrizione="Natale"
data-luogo="Nazionale"
data-nazione="Italia">
<td>25/12/2025</td>
<td>Natale</td>
<td>Nazionale</td>
<td>Italia</td>
<td><a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-whatever="Modifica">Modifica</a>
|
<a class="modalLink" type="submit" data-bs-toggle="modal" data-bs-target="#deleteModal" data-bs-whatever="Elimina">Elimina</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="prova.js"></script>
</body>
</html>
Javascript 代码：
var filters =
{
data: null,
descrizione: null,
luogo: null,
nazione: null,
};
function updateFilters() {
$('.task-list-row').hide().filter(function() {
var
self = $(this),
result = true;
Object.keys(filters).forEach(function (filter) {
if (filters[filter] && (filters[filter] != 'Tutti')) {
result = result && filters[filter] === self.data(filter);
console.log(self.data(filter));
/*if(self.data(filter.includes(filters[filter])))){
console.log('ciao');
}*/}
});
return result;
}).show();
}
function changeFilter(filterName) {
console.log(filterName);
filters[filterName] = this.value;
updateFilters();
}
$('#data-filter').on('change', function() {
changeFilter.call(this, 'data');
});
$('#descrizione-filter').on('keyup', function() {
changeFilter.call(this, 'descrizione');
});
$('#luogo-filter').on('change', function() {
changeFilter.call(this, 'luogo');
});
$('#nazione-filter').on('change', function() {
changeFilter.call(this, 'nazione');
});
function openInput(e, id){
if(e.target.value === "range"){
let input = document.createElement("input")
input.setAttribute("type","date");
input.setAttribute("name", "valueRange");
input.setAttribute("id", "newInput");
input.setAttribute("class", "form-control");
if(document.getElementById("data-filter").getAttribute("type") != "date"){
document.getElementById("data-filter").setAttribute("type", "date");
}
//let i = document.getElementById("input1");
//document.getElementById("input-data").setAttribute("style","")
document.getElementById("1").appendChild(input);
//input.insertAdjacentElement("afterend",i);
}
else if(e.target.value === 'year'){
let data = new Date();
if(document.getElementById("newInput")!=null){
let input = document.getElementById("newInput");
document.getElementById("1").removeChild(input);
}
document.getElementById("data-filter").setAttribute("type","number");
document.getElementById("data-filter").setAttribute("value", data.getFullYear());
}
else{
if(document.getElementById("newInput")!=null){
let input = document.getElementById("newInput");
document.getElementById("1").removeChild(input);
}
document.getElementById("data-filter").setAttribute("value", new Date());
document.getElementById("data-filter").setAttribute("type","date");
}
}
function openInputInteger(e, id){
if(e.target.value === "range"){
let input = document.createElement("input")
input.setAttribute("type","number");
input.setAttribute("name", "valueRange");
input.setAttribute("id", "newInput");
input.setAttribute("style","width: 204px;")
input.setAttribute("class", "form-control");
document.getElementById(id+"1").appendChild(input);
}
else{
if(document.getElementById("newInput")!=null){
let input = document.getElementById("newInput");
document.getElementById(id+"1").removeChild(input);
}
}
}
CSS：
.filterable {
margin-top: 15px;
}
.filterable .panel-heading .pull-right {
margin-top: -20px;
}
.filterable .filters input[disabled] {
background-color: transparent;
border: none;
cursor: auto;
box-shadow: none;
padding: 0;
height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
color: #333;
}
th:hover{
cursor:pointer;
}
th i:hover{
color:green
}
.modalLink {
text-decoration: none;
}