Question

我一直在尝试使用JavaScript向桌面添加搜索过滤器，我已经在我的计算机和浏览器上下载了jQuery，但搜索过滤器仍然无法正常工作。

＆＃13;

var $rows = $('#table tr');
$('#search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, '' ).toLowerCase();

    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="top">
  <!--id "top" for a "return to top of page" button-->
  <h1>
    <!--header-->
    CryptoCost<img width="25">
    <font size="4"><span class="Priceandmarketcap">Live Cryptocurrency Prices & Market Capitalization</span></font>
    <font size="2"><span class="SearchCoinsHead">Search Coins: 
            <font><input type="text" id="search" class="light-table-filter" placeholder="BTC.."></font></span></font>
  </h1>
</header>
<br>
<!--vertical whitespace-->

<span class="indextable">
        <table id="table">
          <tr>
            <th>#</th>    <!--table headers-->
            <th>Coins</th>
            <th>Price</th>
            <th>24H Change</th>
            <th>24H Volume</th>
            <th>Market Cap</th>
            <th>Circulating Coin Supply</th>
          </tr>
          <tr>    <!--start of new row-->
            <td>1</td>    <!--coin number-->
            <td><a href="BTCprice.html"> <img src="" width="15"> BTC </a></td>    
            <!--icon & ticker-->
            <td><big>$7000</big></td>    <!--price-->
            <td><big>-15%</big></td>    <!--24H % Change-->
            <td><big>30,284 BTC</big></td>    <!--24H Volume-->
            <td><big>$117,727,059,656</big></td>    <!--Market Cap-->
            <td><big>16,946,875 BTC</big></td>    <!--Circulating Coin Supply-->
          </tr>
          <tr>
            <td>2</td>
            <td><a href="ETHprice.html"> ETH </a></td>
            <td><big>$400</big></td>
            <td><big>+32%</big></td>
            <td><big>98,497,625 ETH</big></td>
            <td><big>$37,143,553,062</big></td>
            <td><big>98,497,625 ETH</big></td>
          </tr>
          <tr>
            <td>3</td>
            <td><a href="LTCprice.html"> <img src="" width="15"> LTC </a></td>
            <td><big>$120</big></td>
            <td><big>-40%</big></td>
            <td><big>55,849,820 LTC</big></td>
            <td><big>$6,269,309,798</big></td>
            <td><big>55,849,820 LTC</big></td>
          </tr>
        </table>
      </span>

＆＃13;

Answer 1

您未正确包含脚本。这样：

<script>
    src="http://code.jquery.com/jquery- 
3.3.1.min.js"integrity="sha256- 
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous">
</script>

应该是：

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8" crossorigin="anonymous">

Answer 2

这是您真正应该继续选择图书馆的情况之一。原因是你很可能想要添加额外的功能（如你的过滤）和“重新发明轮子”在许多情况下不是最好的方法。

我高度建议一个名为DataTables的免费开源库。它将提供令人难以置信的功能（包括过滤），并且还将为您提供完全响应的表实现 - 这在当今至关重要。另外，它基于jQuery - 您已经在使用它：

https://datatables.net/

如果你只是在玩，那么请忽略这个答案 - 但是如果你要创建一个真正的网站，我会建议使用一个库。

如何使用JS添加表过滤器？

2 个答案: