过滤html表(JS)

Question

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

下面是代码的一小部分，以显示问题

​

$(document).ready(function () {
   
   

    $('#datefilterfrom').on("change", filterRows);
    $('#datefilterto').on("change", filterRows);
    $('#projectfilter').on("change", filterProject);
});

function filterRows() {
    var from = $('#datefilterfrom').val();
    var to = $('#datefilterto').val();

    if (!from && !to) { // no value for from and to
        return;
    }

    from = from || '1970-01-01'; // default from to a old date if it is not set
    to = to || '2999-12-31';

    var dateFrom = moment(from);
    var dateTo = moment(to);

    $('#testTable tr').each(function (i, tr) {
        var val = $(tr).find("td:nth-child(2)").text();
        var dateVal = moment(val, "DD/MM/YYYY");
        var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
        $(tr).css('display', visible);
    });
}
function filterProject() {
    var contentToColor = {
        "Заявка отменена": "#9900ff",
        "Подтверждено менеджером Vchasno": "green",
        "Отменено менеджером Vchasno": "#9900ff",
        "Отклонено региональным менеджером": "#9900ff",
        "Подтверждено региональным менеджером": "red"
    };
    var project = this.value;
    var filter, table, tr, td, i;
    filter = project.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 = "";
            } else {
                tr[i].style.display = "none";
            }
        }

    }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
<div class="row">
        <div class="col-md-3">
            <h4>Дата з</h4>
            <input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
        </div>
        <div class="col-md-3">
            <h4>Дата до</h4>
            <input type="date"  class="form-control" id="datefilterto" data-date-split-input="true">
        </div>
        <div class="col-md-2">
            <h4>Проект</h4>
           <select id="projectfilter" name="projectfilter" class="form-control"><option value="1">Тестовый проект</option><option value="2">Тест2</option></select>
        </div>
    </div>
<table id="testTable" class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Дата</th>
                    <th scope="col">Проект</th>
                   
               
                </tr>
            </thead>
            <tbody id="report">
              <tr>
                <td class="proposalId">9</td><td> 17/07/2018</td> <td> Тестовый проект</td>
              </tr>
              <tr><td class="proposalId">8</td><td> 18/07/2018</td><td> Тестовый проект</td></tr>
              <tr><td class="proposalId">7</td><td> 17/07/2018</td><td> Тест2</td></tr>
              <tr style=""><td class="proposalId">3</td><td> 19/07/2018</td><td> Тест2</td></tr>
    </tbody>
        </table>

​

以下是完整的工作片段

https://codepen.io/suhomlineugene/pen/JBBGXa

当我设置日期筛选器时，它会过滤表，但当我设置第二个筛选器时，它会从未过滤的表中获取数据。我的问题在哪里？

谢谢你的帮助！

Answer 1

问题是filter = project.toUpperCase()正在返回1或2。我更新了逻辑以获得innerHTML和do比较。以下是修改后的代码

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";
            }
        }

    }
}

代码笔链接这里

Answer 2

执行filterProject()时，检查是否已经筛选出正在迭代的行：

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

这里有一个工作代码库：

 https://codepen.io/anon/pen/NBBxad

Answer 3

<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";
      }
    }
  }
}