【发布时间】：2020-08-13 09:20:59
【问题描述】：
我有用于按值过滤表的代码，
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 的列。 .有什么办法吗？
【问题讨论】：
-
单元格的颜色在 HTML 中是如何表示的？
-
你需要显示 HTML 和 CSS... make minimal reproducible example Se 我们可以看到你是如何添加颜色的。
-
能否也为表格添加 HTML 文件？
-
是的当然@keidakida
-
是的，我刚刚更新了代码@ikiK
标签： javascript filter