Question

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

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

以下是_Home.cshtml视图的完整代码。

<!-- 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>

过滤表中的行失败

1 个答案: