javascript - 过滤html表格(JS)

Question

我的 View 中有一个 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 并进行比较。这是修改后的代码

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

    }
}

码笔链接here