使用JS和jQuery搜索HTML表格

Question

使用JS和jQuery搜索HTML表格

8

我制作了一个表格并希望使其可搜索，所以我在谷歌和stackoverflow上搜索。但是不知道为什么，我找到的那些可以工作的东西对我来说却不起作用。下面是HTML和JS代码：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="C.Palma" />
    <meta name="content" content="World of Warcraft. Characters. Project. Learn 2 Code." />

    <title>World of Warcraft Characters.</title>

    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/modernizr.js"></script>

    <script type="text/javascript">
        // When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
        $(document).ready(function(){
            // Write on keyup event of keyword input element
            $("search").keyup(function(){
                // When value of the input is not blank
                if( $(this).val() != "")
                {
                    // Show only matching TR, hide rest of them
                    $("#table tbody tr").hide();
                    $("#table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
                }
                else
                {
                    // When there is no input or clean again, show everything back
                    $("#table tbody tr").show();
                }
            });
        });
        // jQuery expression for case-insensitive filter
        $.extend($.expr[":"],
                {
                    "contains-ci": function(elem, i, match, array)
                    {
                        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
                });
    </script>

</head>
<body>

    <div class="row large-centered">
        <h1>World of Warcraft characters. <small>Mine and my brothers, we share.</small></h1>
    </div>
    <div class="row large-centered">
        <input type="text" id="search" placeholder="Type to search..." />
        <table id="table" width="100%">
            <thead>
                <tr>
                    <th>Character name</th>
                    <th>Class</th>
                    <th>Realm</th>
                </tr>
            </thead>
            <tbody>
            <tr>
                <td>Benjamin.</td>
                <td>Rogue.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Cachoito.</td>
                <td>Hunter.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Contemplario.</td>
                <td>Paladin.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Elthron.</td>
                <td>Death Knight.</td>
                <td>Agamaggan ES.</td>
            </tr>
            <tr>
                <td>Giloh.</td>
                <td>Priest.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Kitialamok.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Magustroll.</td>
                <td>Mage.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Marselus.</td>
                <td>Mage.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Mistrala.</td>
                <td>Warrior.</td>
                <td>Uldum ES.</td>
            </tr>
            <tr>
                <td>Suavemente.</td>
                <td>Warrior.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Tittus.</td>
                <td>Monk.</td>
                <td>Agamaggan EN.</td>
            </tr>
            <tr>
                <td>Yarlokk.</td>
                <td>Warlock.</td>
                <td>Uldum ES.</td>
            </tr>
            </tbody>
        </table>
    </div>

    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>

</body>
</html>

- Milo

1

具体是什么出了问题？ - Ram

1

首先，$("search").keyup(...) 应该改为 $("#search").keyup(...)。 - Ben Jackson

$("search").keyup(function(){ 替换为 $("#search") - TCHdvlp

5个回答

6

我发现上面的解决方案在理论上是可行的（尽管它没有起作用），但我发现以下解决方案效果更好：

$('#search-field').on('keyup', function(e) {
    if ('' != this.value) {
        var reg = new RegExp(this.value, 'i'); // case-insesitive

        $('.table tbody').find('tr').each(function() {
            var $me = $(this);
            if (!$me.children('td:first').text().match(reg)) {
                $me.hide();
            } else {
                $me.show();
            }
        });
    } else {
        $('.table tbody').find('tr').show();
    }
});

如果您想要搜索多列，请更改以下内容：

if (!$me.children('td:first').text().match(reg)) {

致：

if (!$me.children('td').text().match(reg)) {

- Yes Barry

0

我觉得之前提供的方法对我的表格来说有点慢。我想到了一个不同的解决方案，看起来要快得多。

如果你想搜索每个单元格，你可以给每个单元格添加一个属性（我用的是data-name），例如：<td data-name="john smith">John Smith</td>。然后你可以使用以下javascript代码：

$("#search").keyup(function() {
  var val = this.value.trim().toLowerCase();
  if ('' != val) {
    var split = val.split(/\s+/);
    var selector = 'td';
    for(var i=0;i<split.length;i++){
      selector = selector+'[data-name*='+split[i]+']';
    }
    $('tr').hide();
    $(selector).closest('tr').show();
  } else {
    $('tr').show();
  }
});

如果您只想搜索单个属性的行，您可以将该属性添加到行中，例如：<tr data-name="john smith"><td>John Smith</td><td>...</td></tr>，然后使用以下代码：

$("#search").keyup(function() {
  var val = this.value.trim().toLowerCase();
  if ('' != val) {
    var split = val.split(/\s+/);
    var selector = 'tr';
    for(var i=0;i<split.length;i++){
      selector = selector+'[data-name*='+split[i]+']';
    }
    $('tr').hide();
    $(selector).show();
  } else {
    $('tr').show();
  }
});

希望这能帮到你！

- Jose Castellanos

0

我在我的项目中使用了这个精确的代码片段，使表格可以被搜索

<script>
    $(document).ready(function () {
        $("#input").on("keyup", function () { //here #input textbox id 
            var value = $(this).val().toLowerCase();
            $("#table tr").filter(function () { //here #table table body id 
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>

不要忘记添加这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

- Mahmud

-1

你可以使用这段代码，它运行得非常出色。

$('#search').keydown(function () {
      var searchitem = $('#search').val();
      if (searchitem == '' || searchitem == null || searchitem == undefined)           {
          $('#table tbody tr').show();
      }
      else {
          searchitem = searchitem.toUpperCase();
          $('#table tbody tr').hide();
          $('#table tbody tr').each(function () {
              if ($(this).text().indexOf(searchitem) > -1) {
                  $(this).show();
              }
          });
      }
  });

- Kalu Singh Rao

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Cracker0dks · Accepted Answer

我已经放置了你代码中有用的部分并且写了一个能够运行的代码演示。 http://jsfiddle.net/9hGym/602/ 现在这是搜索引擎：

    var searchText = $(this).val().toLowerCase();
    $.each($("#table tbody tr"), function() {
        if($(this).text().toLowerCase().indexOf(searchText) === -1)
           $(this).hide();
        else
           $(this).show();                
    });

你也可以使用 http://www.datatables.net/ 来做这样的事情 ;)