javascript - 过滤具有多个值的表
问题描述
我这里有一个代码,它是表数据的示例,我们可以在其中过滤每列,现在我想在具有多个值的状态字段中进行过滤,例如:如果我想打印已完成、正在进行和暂停的数据怎么办,那么这个数据应该是唯一要打印的数据,我该怎么办?,请帮忙!
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function () {
var $i = $filters.filter(function () {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function () {
return this.className
}).get().join(',.');
$rows.hide().filter(function () {
return $('td', this).filter(cls).filter(function () {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px" class='Province'>Province1
</td>
<td width="20px" class='LGU'>Municipality/LGU1
</td>
<td width="20px" class='Barangay'>Barangay1
</td>
<td width="30px" class='Project'>Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px" class='Status'>completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2013
</td>
<td width="20px" class='Province'>Province2
</td>
<td width="20px" class='LGU'>Municipality/LGU2
</td>
<td width="20px" class='Barangay'>Barangay2
</td>
<td width="30px" class='Project'>Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px" class='Status'>ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px" class='Province'>Province3
</td>
<td width="20px" class='LGU'>Municipality/LGU3
</td>
<td width="20px" class='Barangay'>Barangay3
</td>
<td width="30px" class='Project'>Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px" class='Status'>suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px" class='Province'>Province4
</td>
<td width="20px" class='LGU'>Municipality/LGU4
</td>
<td width="20px" class='Barangay'>Barangay4
</td>
<td width="30px" class='Project'>Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px" class='Status'>cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
解决方案
您可以在这里做的是在过滤器中为关键字使用分隔符,并在拆分此分隔符后将status
值读取为 an 。array
这是一个使用空格作为分隔符的代码,并根据多个值过滤状态列:
let val = this.value;
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
let vals = val.split(" ").map(function(v) {
return v.toLowerCase();
});
return vals.some(function(v) {
return content.indexOf(v) > -1;
});
}).length === len;
}).show();
笔记:
这将仅与status
列一起使用,我在这里制作了一个完整的工作演示片段。
演示:
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function() {
var $i = $filters.filter(function() {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function() {
return this.className
}).get().join(',.');
if (this.id != 'Status') {
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
} else {
let val = this.value;
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
let vals = val.split(" ").map(function(v) {
return v.toLowerCase();
});
return vals.some(function(v) {
return content.indexOf(v) > -1;
});
}).length === len;
}).show();
}
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<input type='text' class='Status' id='Status' style="width: 100px;" placeholder="Status" />
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px" class='Province'>Province1
</td>
<td width="20px" class='LGU'>Municipality/LGU1
</td>
<td width="20px" class='Barangay'>Barangay1
</td>
<td width="30px" class='Project'>Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px" class='Status'>completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2013
</td>
<td width="20px" class='Province'>Province2
</td>
<td width="20px" class='LGU'>Municipality/LGU2
</td>
<td width="20px" class='Barangay'>Barangay2
</td>
<td width="30px" class='Project'>Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px" class='Status'>ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px" class='Province'>Province3
</td>
<td width="20px" class='LGU'>Municipality/LGU3
</td>
<td width="20px" class='Barangay'>Barangay3
</td>
<td width="30px" class='Project'>Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px" class='Status'>suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px" class='Province'>Province4
</td>
<td width="20px" class='LGU'>Municipality/LGU4
</td>
<td width="20px" class='Barangay'>Barangay4
</td>
<td width="30px" class='Project'>Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px" class='Status'>cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
编辑:
这是使用Status
过滤器下拉列表的片段:
var $rows = $('tbody > tr'),
$filters = $('#filter_table input');
$filters.on("keyup", function() {
var $i = $filters.filter(function() {
return $.trim(this.value).length > 0;
}),
len = $i.length;
if (len === 0) return $rows.show();
var cls = '.' + $i.map(function() {
return this.className
}).get().join(',.');
$rows.hide().filter(function() {
return $('td', this).filter(cls).filter(function() {
var content = this.textContent,
inputVal = $i.filter('.' + this.className).val();
return content.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
}).length === len;
}).show();
});
$("#Status").on("change", function() {
let val = $(this).val();
$rows.hide().filter(function() {
return $('td', this).filter(function() {
var content = this.textContent;
let vals = val.map(function(v) {
return v.toLowerCase();
});
return vals.some(function(v) {
return content.indexOf(v) > -1;
});
}).length >0;
}).show();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="panel panel-default" id="filter_table">
Input here to Search <br>
<input type='text' class='Program' id='Program' style="width: 100px;" placeholder="Program" />
<input type='text' class='Year' id='Year' style="width: 100px;" placeholder="Year" />
<input type='text' class='Province' id='Province' style="width: 100px;" placeholder="Province" />
<input type='text' class='LGU' id='LGU' style="width: 100px;" placeholder="LGU" />
<input type='text' class='Barangay' id='Barangay' style="width: 100px;" placeholder="Barangay" />
<input type='text' class='Project' id='Project' style="width: 100px;" placeholder="Project" />
<input type='text' class='Allocation' id='Allocation' style="width: 100px;" placeholder="Allocation" />
<select multiple class="Status" id="Status" style="width: 100px;">
<option value="completed">completed</option>
<option value="ongoing">ongoing</option>
<option value="suspended">suspended</option>
<option value="cancelled">cancelled</option>
</select>
</div>
<table border='1' class="table table-hover" id='products'>
<thead>
<tr>
<th width="10px">Program
</th>
<th width="10px">Year
</th>
<th width="20px">Province
</th>
<th width="20px">Municipality/LGU
</th>
<th width="20px">Barangay
</th>
<th width="30px">Project
</th>
<th width="20px">Allocation
</th>
<th width="20px">Status
</th>
<th width="5px">PA%
</th>
</tr>
</thead>
<tbody>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2012
</td>
<td width="20px" class='Province'>Province1
</td>
<td width="20px" class='LGU'>Municipality/LGU1
</td>
<td width="20px" class='Barangay'>Barangay1
</td>
<td width="30px" class='Project'>Project1
</td>
<td width="20px" class='Allocation'>200000
</td>
<td width="20px" class='Status'>completed
</td>
<td width="5px">100%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program1
</td>
<td width="10px" class='Year'>2013
</td>
<td width="20px" class='Province'>Province2
</td>
<td width="20px" class='LGU'>Municipality/LGU2
</td>
<td width="20px" class='Barangay'>Barangay2
</td>
<td width="30px" class='Project'>Project2
</td>
<td width="20px" class='Allocation'>500000
</td>
<td width="20px" class='Status'>ongoing
</td>
<td width="5px">50%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program3
</td>
<td width="10px" class='Year'>2014
</td>
<td width="20px" class='Province'>Province3
</td>
<td width="20px" class='LGU'>Municipality/LGU3
</td>
<td width="20px" class='Barangay'>Barangay3
</td>
<td width="30px" class='Project'>Project3
</td>
<td width="20px" class='Allocation'>6000000
</td>
<td width="20px" class='Status'>suspended
</td>
<td width="5px">0%
</td>
</tr>
<tr>
<td width="10px" class='Program'>Program4
</td>
<td width="10px" class='Year'>2016
</td>
<td width="20px" class='Province'>Province4
</td>
<td width="20px" class='LGU'>Municipality/LGU4
</td>
<td width="20px" class='Barangay'>Barangay4
</td>
<td width="30px" class='Project'>Project4
</td>
<td width="20px" class='Allocation'>1000000
</td>
<td width="20px" class='Status'>cancelled
</td>
<td width="5px">0%
</td>
</tr>
</tbody>
</table>
我希望它符合您的需求。
推荐阅读
- javascript - 遍历 div 元素
- azure - Azure 认知搜索服务后面的索引存储在哪里?
- swagger - springdoc-openapi-ui 无法渲染 Protobuf 模型导致浏览器崩溃
- scala - 在 Scala 中创建 self 类型的实例
- wso2 - WSO2 API Microgateway 3.1.0 中的 API 构建失败
- indexing - 在 Solr 中,我如何索引包含特殊字符的纯文本文件
- azure - Azure AD 工作簿:高级设置下的导出参数不适用于饼图
- python - 使用 matplotlib 绘制和分布垂直线
- tensorflow - 在 CNN 中上采样 [32x32x6] 层的正确方法是什么
- javascript - 用于写入 SQL 数据库的 php for 循环问题