javascript - 过滤表中的行失败

Question

我正在开发 ASP.NET MVC5 应用程序。

我的目标是根据文本框中的数据过滤表格行。

这是我在 _Home.cshtml View 中的完整代码。

<!-- ko with: home -->
    <div class="row">
        <div class="col-md-3">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> 
            <script type="text/javascript">
                $("#contactsFilter").keyup(function () {
                    var rows = $("#contactsTable").find("tr").hide();
                    var data = this.value.split(" ");
                    $.each(data, function (i, v) {
                        rows.filter(":contains('" + v + "')").show();
                    });
                });
            </script>

            <div class="col-contacts">
                <div class="col-contacts-textbox-and-contacts">
                    <input type="text" id="contactsFilter" class="form-control" />
                    <div class="col-contacts-list"></div>

                    <table id="contactsTable">
                        <thead>
                        </thead>
                        <tbody>
                            <tr>
                                <td>James T. Kirk</td>
                            </tr>
                            <tr>
                                <td>Spock</td>
                            </tr>
                            <tr>
                                <td>Leonard McCoy</td>
                            </tr>
                            <tr>
                                <td>Montgomery Scott</td>
                            </tr>
                            <tr>
                                <td>Nyota Uhura</td>
                            </tr>
                            <tr>
                                <td>Hikaru Sulu</td>
                            </tr>
                            <tr>
                                <td>Pavel Chekov</td>
                            </tr>
                        </tbody>
                    </table>    
                </div>
            </div>
        </div>
        <div class="col-md-9">

        </div>
        </div>
        <!-- /ko -->

但是过滤环失败。只是行不通。脚本正在运行，但在我的上下文中它只是不执行过滤环!也许我错过了添加一些引用或其他东西以使其发挥作用？

Answer 1

看起来工作正常。但是，您可能会遇到问题，因为 :contains 区分大小写。

//Wait until the DOM is loaded
$(function(){
    $("#contactsFilter").keyup(function () {
      var rows = $("#contactsTable").find("tr").hide();
      var data = this.value.split(" ");
      $.each(data, function (i, v) {
        rows.filter(":contains('" + v + "')").show();
      });
    });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-contacts">
  <div class="col-contacts-textbox-and-contacts">
    <input type="text" id="contactsFilter" class="form-control" />
    <div class="col-contacts-list"></div>
    <table id="contactsTable">
      <thead>
      </thead>
      <tbody>
        <tr>
          <td>James T. Kirk</td>
        </tr>
        <tr>
          <td>Spock</td>
        </tr>
        <tr>
          <td>Leonard McCoy</td>
        </tr>
        <tr>
          <td>Montgomery Scott</td>
        </tr>
        <tr>
          <td>Nyota Uhura</td>
        </tr>
        <tr>
          <td>Hikaru Sulu</td>
        </tr>
        <tr>
          <td>Pavel Chekov</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>