web-dev-qa-db-ja.com

JSとjQueryでHTMLテーブルを検索する


テーブルを作成して検索可能にしたかったので、グーグルで検索して、starckoverflowを調べました。
しかし、どういうわけか、私が見つけたものは、うまくいくはずですが、私にはうまくいきませんか？

これが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>
javascriptjqueryhtmlzurb-foundation
7
Milo

私はあなたのコードの重要な部分を置き、実用的なフィドルを書きました

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/ をそのようなものに使用することもできます;）

35
Cracker0dks

上記の解決策は理論的には問題ないことがわかりましたが（機能しませんでしたが）、これがより適切に機能することがわかりました。

$('#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)) {
5
Yes Barry

投稿された方法は私のテーブルにとって少し遅かった。私ははるかに速いように見える別の解決策を思いついた。

すべてのセルを検索する場合は、セルに属性を追加できます（私はデータ名を使用しました）。例：<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();
  }
});

お役に立てば幸いです。

0
Jose Castellanos