Filtern einer Tabelle nach Eingabewert beim Hochfahren (vereinfache meinen Code) [closed]

Ich habe bereits eine Lösung, aber sie ist chaotisch und könnte etwas verbessert werden. Grundsätzlich habe ich zwei Tabellen auf einer Seite und jede Tabelle hat ein Eingabetextfeld für jede Spalte mit einem entsprechenden Filternamen. Die Idee ist, dass, während der Benutzer über dieser Spalte tippt, die Tabelle von jeder Variablen gefiltert wird. Hier habe ich meine Lösung gefunden, aber dies ist nur für ein Eingabefeld und eine Tabelle. Auch wenn Sie das Eingabefeld löschen, wird die gesamte Tabelle gelöscht. Mir gefällt, dass in diesem Beispiel die Groß- und Kleinschreibung nicht berücksichtigt wird, aber einige Fehler vorliegen.http://www.marceble.com/2010/02/simple-jquery-table-row-filter/ Hier ist eine Jsfiddle, die ich zusammengestellt habe, die aber nicht so filtert, wie sie sollte.http://jsfiddle.net/anschwem/mAAvW/

Code:

<script>
 $(document).ready(function() {
 //Declare the custom selector 'containsIgnoreCase'.
      $.expr[':'].containsIgnoreCase = function(n,i,m){
          return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
      };

      $("#searchInput").keyup(function(){

          $("#fbody").find("tr").hide();
          var data = this.value.split(" ");
          var jo = $("#fbody").find("tr");
          $.each(data, function(i, v){

               //Use the new containsIgnoreCase function instead
               jo = jo.filter("*:containsIgnoreCase('"+v+"')");
          });

          jo.show();

      }).focus(function(){
          this.value="";
          $(this).css({"color":"black"});
          $(this).unbind('focus');
      }).css({"color":"#C0C0C0"});
  });
</script>

HTML:

<table>
  <thead>
    <tr>
        <td><input value="Animals"></td>
        <td><input value="Numbers"></td>   
    </tr>
  </thead>
  <tbody>
    <tr><td>cat</td><td>one</td></tr>
    <tr><td>dog</td><td>two</td></tr>
    <tr><td>cat</td><td>three</td></tr>
    <tr><td>moose</td><td>four</td></tr>
    <tr><td>mouse</td><td>five</td></tr>
    <tr><td>dog</td><td>six</td></tr>
  </tbody>
</table>

Antworten auf die Frage(3)

Ihre Antwort auf die Frage