如何解决如何使用javascript使用值和颜色过滤表
我有用于按值过滤表的代码,
function myFunction() {
// Declare variables
var input,filter,table,tr,td,i,txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows,and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
这是我的桌子
这是生成表的脚本
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"OutputNew.csv",dataType:"text",success:function(data){
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search Color"><table id="myTable" class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++) {
var cell_data = employee_data[count].split(',');
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++){
if(count === 0){
table_data += '<th>'+cell_data[cell_count]+'</th>';
}else{
if(cell_data[cell_count] .includes("Not Matching")){
var ret = cell_data[cell_count].replace('Not Matching','');
if (ret == ""){
table_data += '<td>'+ret+'</td>'
}else{
table_data += '<td><span class="badge-danger">'+ret+'</span></td>'
}
}else if(cell_data[cell_count] .includes("Matching")){
var ret = cell_data[cell_count].replace('Matching','');
if (ret == ""){
table_data += '<td>'+ret+'</td>'
}else{
table_data += '<td><span class="badge-complete">'+ret+'</span></td>';
}
}else{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
CSS
div#loadbutton {
margin-left: 158px;
}
h1#Heading {
margin-left: 154px;
}
td {
border: 1px solid black;
word-wrap: break-word;
}
input#myInput {
width: 343px;
height: 49px;
border-radius: 21px;
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
WIDTH: 223%;
MARGIN-LEFT: -205PX;
}
.badge-Nill{
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: blue;
border-radius: 10px;
width: 127px;
}
.badge-danger {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: red;
border-radius: 10px;
width: 127px;
}
th {
text-align: left;
width: 152px;
}
table {border-collapse:collapse; table-layout:fixed; width:310px;}
table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
.badge-complete {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: limegreen;
border-radius: 10px;
width: 127px;
}
div#employee_table {
margin-left: 170px;
margin-right: 70px;
}
所以它过滤值,在这里我想使用Value和color过滤表。例如,如果我键入 ABS 和 RED ,则应检索值为 ABS 和颜色 Red 的列。 。有什么办法吗?
解决方法
顺便说一句,您还可以添加您的AJAX样本数据,这将成为真实的Minimal,Reproducible Example ,这样,我将仅以赢得的HTML表为例。
您要将<span class="badge-danger">
和badge-complete
类的跨度添加到td
中,因此只需搜索innerHTML
而不是textContent
或innerText
这些类名的td's
或整个tr
。
为了能够搜索“颜色”,请获取输入值,如果它与red
相匹配,请将其切换为badge-danger
并进行搜索。绿色也一样:
if (filter === "RED") {
filter = "badge-danger";
} else if (filter === "GREEN") {
filter = "badge-complete";
}
这是搜索列的方式,在下面的示例中,这将搜索前3列:
for (var i = 0; i < rows.length; i++) {
var Col1 = rows[i].cells[0].innerHTML;
var Col2 = rows[i].cells[1].innerHTML;
var Col3 = rows[i].cells[2].innerHTML;
if (Col1.indexOf(filter) > -1 ||
Col2.indexOf(filter) > -1 ||
Col3.indexOf(filter) > -1) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
因此,从这样发布的图片来看,您需要定位最后4列:
for (var i = 0; i < rows.length; i++) {
var Col1 = rows[i].cells[4].innerHTML;
var Col2 = rows[i].cells[5].innerHTML;
var Col3 = rows[i].cells[6].innerHTML;
var Col4 = rows[i].cells[7].innerHTML;
if (Col1.indexOf(filter) > -1 ||
Col2.indexOf(filter) > -1 ||
Col3.indexOf(filter) > -1 ||
Col4.indexOf(filter) > -1 ) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
仅颜色示例:
function filterTable(event) {
var filter = document.getElementById("myInput").value.toUpperCase();
var rows = document.querySelector("#myTable tbody").rows;
if (filter === "RED") {
filter = "badge-danger";
} else if (filter === "GREEN") {
filter = "badge-complete";
}
for (var i = 0; i < rows.length; i++) {
var Col1 = rows[i].cells[0].innerHTML;
var Col2 = rows[i].cells[1].innerHTML;
var Col3 = rows[i].cells[2].innerHTML;
if (Col1.indexOf(filter) > -1 ||
Col2.indexOf(filter) > -1 ||
Col3.indexOf(filter) > -1) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
document.querySelector('#myInput').addEventListener('keyup',filterTable,false);
div#loadbutton {
margin-left: 158px;
}
h1#Heading {
margin-left: 154px;
}
td {
border: 1px solid black;
word-wrap: break-word;
}
input#myInput {
width: 343px;
height: 49px;
border-radius: 21px;
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
WIDTH: 223%;
MARGIN-LEFT: -205PX;
}
.badge-Nill {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: blue;
border-radius: 10px;
width: 127px;
}
.badge-danger {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: red;
border-radius: 10px;
width: 127px;
}
th {
text-align: left;
width: 152px;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 310px;
}
table td {
border: solid 1px #fab;
width: 100px;
word-wrap: break-word;
}
.badge-complete {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: limegreen;
border-radius: 10px;
width: 127px;
}
div#employee_table {
margin-left: 170px;
margin-right: 70px;
}
<input type="text" id="myInput" name="myInput" onkeyup="filterTable()" placeholder="color"><br>
<table id="myTable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge-danger">Jill</span></td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td><span class="badge-danger">94</span></td>
</tr>
<tr>
<td>Adam</td>
<td><span class="badge-danger">Johnson</span></td>
<td>67</td>
</tr>
<tr>
<td>Bo</td>
<td><span class="badge-complete">Nilson</span></td>
<td>35</td>
</tr>
</tbody>
</table>
组合: 要将其结合起来,还需要做更多的工作:
当您搜索名称时,它会过滤这些名称,但是当您在搜索颜色的顶部时,它将找到所有与名称无关的颜色,因此您需要说只搜索那些尚未隐藏的行:
if (tr[i].style.display !== "none") {
tr[i].style.display = "";
}
您还必须调整以下颜色:
if (filter === "RED" || filter === "R" || filter === "RE") {
filter = "badge-danger";
}
因为如果只留下红色字样,当您键入后面的r
时,它将全部隐藏,并且我们有条件仅搜索未隐藏的字样,因为只有红色字样会转换为徽章危险。在文本上,您不需要。或使用颜色名称进行下拉...
这是在清空一个输入时全部重置:
if (filter==="") {
document.getElementById("myInput").value="";
document.getElementById("myInputtext").value="";
[...document.querySelectorAll("#myTable tbody tr")].forEach(el => { el.style.display = "" });
}
合并示例:
搜索adam
或bo
,green
或red
...
function myFunction() {
// Declare variables
var input,filter,table,tr,td,i,txtValue;
input = document.getElementById("myInputtext");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows,and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
if (tr[i].style.display !== "none") {
tr[i].style.display = "";
}
} else {
tr[i].style.display = "none";
}
}
}
if (filter==="") {
document.getElementById("myInput").value="";
document.getElementById("myInputtext").value="";
[...document.querySelectorAll("#myTable tbody tr")].forEach(el => { el.style.display = "" });
}
}
function filterTable(event) {
var filter = document.getElementById("myInput").value.toUpperCase();
var rows = document.querySelector("#myTable tbody").rows;
if (filter === "RED" || filter === "R" || filter === "RE") {
filter = "badge-danger";
} else if (filter === "GREEN" || filter === "G" || filter === "GR" || filter === "GRE" || filter === "GREE") {
filter = "badge-complete";
}
for (var i = 0; i < rows.length; i++) {
var Col1 = rows[i].cells[0].innerHTML;
var Col2 = rows[i].cells[1].innerHTML;
var Col3 = rows[i].cells[2].innerHTML;
if (Col1.indexOf(filter) > -1 ||
Col2.indexOf(filter) > -1 ||
Col3.indexOf(filter) > -1) {
if (rows[i].style.display !== "none") {
rows[i].style.display = "";
}
} else {
rows[i].style.display = "none";
}
}
if (filter==="") {
document.getElementById("myInput").value="";
document.getElementById("myInputtext").value="";
[...document.querySelectorAll("#myTable tbody tr")].forEach(el => { el.style.display = "" });
}
}
document.querySelector('#myInputtext').addEventListener('keyup',myFunction,false);
document.querySelector('#myInput').addEventListener('keyup',false);
div#loadbutton {
margin-left: 158px;
}
h1#Heading {
margin-left: 154px;
}
td {
border: 1px solid black;
word-wrap: break-word;
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
WIDTH: 223%;
MARGIN-LEFT: -205PX;
}
.badge-Nill {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: blue;
border-radius: 10px;
width: 127px;
}
.badge-danger {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: red;
border-radius: 10px;
width: 127px;
}
th {
text-align: left;
width: 152px;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 310px;
}
table td {
border: solid 1px #fab;
width: 100px;
word-wrap: break-word;
}
.badge-complete {
display: inline-block;
min-width: 49px;
padding: 9px 9px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: limegreen;
border-radius: 10px;
width: 127px;
}
div#employee_table {
margin-left: 170px;
margin-right: 70px;
}
<input type="text" id="myInput" name="myInput" placeholder="color"><br>
<input type="text" id="myInputtext" name="myInput" placeholder="First Name"><br>
<table id="myTable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="badge-danger">Jill</span></td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td><span class="badge-danger">94</span></td>
</tr>
<tr>
<td>Adam</td>
<td><span class="badge-danger">Johnson</span></td>
<td>67</td>
</tr>
<tr>
<td>Adam</td>
<td><span class="badge-complete">Johnson</span></td>
<td>67</td>
</tr>
<tr>
<td>Bo</td>
<td><span class="badge-complete">Nilson</span></td>
<td>35</td>
</tr>
<tr>
<td>Bo</td>
<td><span class="badge-danger">Nilson</span></td>
<td>35</td>
</tr>
</tbody>
</table>
参考how to filter multiple columns,or whole rows。
肯定还有改进的空间,但是我为此花了很多时间,这足以让您开始并理解如何做。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。