如何使用多个输入过滤JS表

时间:2018-05-31 13:06:04

标签: javascript model-view-controller

我正在编写c#应用程序。我必须使用多个输入过滤Js表。当我只在一个输入中键入内容时,它可以正常工作,但如果我想搜索表格,例如"服务价格"和"零件价格"它一无所获。

    <form id="search-repairs">
    <p>
        Service Price : <input type="text" id="searchServicePrice" class="searchInput" onkeyup="searchingEngine(3)" />
        Parts Price : <input type="text" id="searchPartsPrice" class="searchInput" onkeyup="searchingEngine(2)" />
        Summary Price : <input type="text" id="searchBySumPrice" class="searchInput" onkeyup="searchingEngine(5)" />
        Date : <input type="text" id="searchDate" class="searchInput" onkeyup="searchingEngine(0)" />

    </p>
</form>



<table id="table" class="table table-striped table-hover">
    <thead>
        <tr>
            <th>
                Date
            </th>
            <th>
                Description
            </th>
            <th>
                PartsPrice
            </th>
            <th>
                Price
            </th>
            <th>
                ServicerId
            </th>
            <th>
                summaryPrice
            </th>
        </tr>
    </thead>
    <tbody id="searchBody">

        @foreach (var item in Model)
        {
            var price = item.Price;
            var partsPrice = item.PartsPrice;
            var sum = price + partsPrice;
            <tr>

                <td>
                    @Html.DisplayFor(modelItem => item.Date)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Description)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PartsPrice)
                </td>
                <td name="price">
                    @Html.DisplayFor(modelItem => item.Price)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ServicerId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => sum);
                </td>


            </tr>
        }

    </tbody>
</table>

这是我的代码来过滤这个表。这是简单的JavaScript代码。我认为过滤变量有问题。我尝试了很多不同的解决方案,但它无论如何都不想工作。

function searchingEngine(col) {
    var table, trs, searchByPrice, searchByPartsPrice, searchByDate, searchBySumPrice, filter, i, td;
    table = document.getElementById("table");
    trs = table.getElementsByTagName("tr");


    searchByPrice = document.forms['search-repairs'].querySelector("#searchServicePrice");
    searchByPartsPrice = document.forms['search-repairs'].querySelector("#searchPartsPrice");
    searchByDate = document.forms['search-repairs'].querySelector("#searchDate");
    searchBySumPrice = document.forms['search-repairs'].querySelector("#searchBySumPrice");

    filter = searchByPrice.value.toUpperCase() || searchByPartsPrice.value.toUpperCase() ||
        searchByDate.value.toUpperCase() || searchBySumPrice.value.toUpperCase();
    for (i = 0; i < trs.length; i++) {
        td = trs[i].getElementsByTagName("td")[col];
        if (td) {
            if (td.textContent.toUpperCase().indexOf(filter) > -1) {
                trs[i].style.display = "";


            } else {
                trs[i].style.display = "none";


            }

        }

    }

}

0 个答案:

没有答案