Javascript 过滤html表（JS）

我的视图中有一个html表，我想使用多个过滤器进行过滤。在这种情况下，我有3个过滤器，但我可以有更多

下面是代码的一小部分，用来说明问题

$（文档）.ready（函数（）{
$（'#datefilterfrom'）。在（“更改”，filterRows）；
$（'#datefilterto'）。on（“change”，filterRows）；
$（#projectfilter'）。在（“更改”，filterProject）；
});
函数filterRows（）{
var from=$（'#datefilterfrom'）.val（）；
var to=$（'#datefilterto'）.val（）；
如果（！from&&！to）{//from和to没有值
返回；
}
from=from | |“1970-01-01”；//如果未设置，则默认从到旧日期
to=to | |“2999-12-31”；
var dateFrom=时刻（从）；
var dateTo=力矩（to）；
$（'#testTable tr'）。每个（函数（i，tr）{
var val=$（tr.find（“td:nth child（2）”）.text（）；
var dateVal=时刻（val，“日/月/年”）；
var visible=（dateVal.isBetween（dateFrom，dateTo，null，[]）？“”：“无”；//[]表示包含
$（tr）.css（'display'，可见）；
});
}
函数filterProject（）{
var contentToColor={
“9900ff”，
“绿色”，
“Vchasno”：“9900ff”，
“9900ff”，
“红色”：“红色”
};
var project=this.value；
var滤波器，表，tr，td，i；
filter=project.toUpperCase（）；
table=document.getElementById（“testTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

Дата з
Дата до
Проект
Тестовый проектТест2
#
Дата
Проект
9 17/07/2018  Тестовый проект
8 18/07/2018 Тестовый проект
7 17/07/2018 Тест2
3 19/07/2018 Тест2

执行filterProject（）时，请检查是否已过滤掉正在迭代的行：

....
for (i = 0; i < tr.length; i++) {
  if(tr[i].style.display !== 'none'){
...

---

问题是

filter=project。toUpperCase（）

正在返回

1

或

2

。我更新了逻辑以获得

innerHTML

和do compare。这是修改后的代码

function filterProject() {
    var contentToColor = {
        "Заявка отменена": "#9900ff",
        "Подтверждено менеджером Vchasno": "green",
        "Отменено менеджером Vchasno": "#9900ff",
        "Отклонено региональным менеджером": "#9900ff",
        "Подтверждено региональным менеджером": "red"
    };
    let dumb = this.options.selectedIndex;
    dumb = this.options[dumb].innerHTML;
    console.log(dumb);
    var filter, table, tr, td, i;
    filter = dumb.toUpperCase();
    table = document.getElementById("testTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[2];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "table-row";
            } else {
                tr[i].style.display = "none";
            }
        }

    }
}

函数过滤器项目（）{
var contentToColor={
“9900ff”，
“绿色”，
“Vchasno”：“9900ff”，
“9900ff”，
“红色”：“红色”
};
设dumb=this.options.selectedIndex；
dumb=this.options[dumb].innerHTML；
console.log（哑）；
var滤波器，表，tr，td，i；
filter=dumb.toUpperCase（）；
table=document.getElementById（“testTable”）；
tr=table.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“表格行”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

代码笔链接

<input type="text" id="input_id" onkeyup="tableSearch('id', 'table', 0)">

Javascript

function tableSearch(input_id, table_id, col) {
  var input, filter, table, tr, td, i;
  input = document.getElementById(input_id);
  filter = input.value.toUpperCase();
  table = document.getElementById(table_id);
  tr = table.getElementsByTagName('tr');

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName('td')[col];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

函数表搜索（输入id、表id、列）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（输入\标识）；
filter=input.value.toUpperCase（）；
table=document.getElementById（table_id）；
tr=table.getElementsByTagName（'tr'）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

是否引用下拉列表进行筛选？是，下拉列表中的值。测试示例@aravind问题是

filter=project.toUpperCase（）正在返回
1
或
2
，因此我如何修复此问题@Aravinds我正在检查..将作为answer@EugeneSukh现在检查，是的。谢谢，这很有帮助。谢谢，但如果我能再多一个过滤器的话。我会有问题的。我会更新code@EugeneSukh请你详细说明一下，好让我有一个look@EugeneSukh看起来像是在我这边工作。您能告诉一个它失败的例子吗？如果您设置了这样的过滤器，如2018年7月16日-2018年7月19日-2-2-2-2-2-2-2-2-2-2-2，您将看到在П-2列中，您将有一个值。这是不对的，它只需要是2个值，这是因为您分别执行筛选、筛选项目和筛选服务。因此，它不是一个组合。你必须把它组合起来
function tableSearch(input_id, table_id, col) {
  var input, filter, table, tr, td, i;
  input = document.getElementById(input_id);
  filter = input.value.toUpperCase();
  table = document.getElementById(table_id);
  tr = table.getElementsByTagName('tr');

  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName('td')[col];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}