Suche HTML-Tabelle mit JS und jQuery

Ich habe eine Tabelle erstellt und wollte es durchsuchbar, also googelte ich und sah hier bei starckoverflow.

Aber irgendwie, die Dinge, die ich gefunden habe, das sollte funktionieren, nicht für mich arbeiten?

Hier ist der code, sowohl HTML als auch 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>

Was genau funktioniert nicht?
Für eine Sache, die $("search").keyup(...) sollte $("#search").keyup(...).
$("search").keyup(function(){ ersetzen durch $("#search")

InformationsquelleAutor Milo | 2013-12-13

Habe ich den Teil des Codes, dass die Dinge und schrieb eine Arbeit fiddle

http://jsfiddle.net/9hGym/602/

dies ist jetzt der search engin:

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

können Sie auch http://www.datatables.net/ für solche Dinge 😉

tolle Lösung!
Super!!! u mein Leben gerettet 🙂 danke @Cracker0dks
tolle Lösung 😀

InformationsquelleAutor Cracker0dks

Fand ich, dass die oben genannte Lösung war in Ordnung in der Theorie (obwohl es nicht funktioniert hat), aber ich fand, dass dies besser funktionieren:

$('#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();
    }
});

Wenn Sie suchen möchten mehr als eine Spalte, dann ändern Sie einfach:

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

Zu:

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

InformationsquelleAutor Yes Barry

Den Möglichkeiten, die geschrieben wurden, ein wenig langsam für meinen Tisch. Ich kam mit einer anderen Lösung, die scheint zu sein, viel schneller.

Wenn Sie durchsuchen möchten, aus jeder Zelle, die Sie hinzufügen können, ein Attribut, das der Zelle (ich verwendete Daten-name), ex:<td data-name="john smith">John Smith</td>. Dann können Sie diesen javascript-code:

$("#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();
  }
});

Wenn Sie nur wollen, zu suchen, eine Zeilen für ein einzelnes Attribut können Sie fügen Sie einfach das Attribut auf die Reihe wie <tr data-name="john smith"><td>John Smith</td><td>...</td></tr> und verwenden Sie die folgenden:

$("#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();
  }
});

Hoffe, das hilft!

InformationsquelleAutor Jose Castellanos

-1

Können Sie diesen code verwenden. Es funktioniert ausgezeichnet.

$('#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();
              }
          });
      }
  });

InformationsquelleAutor TechnicalKalsa

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.