Moritz: Livesearch

Hallo,
ich habe folgendes Skript für eine Livesearch geschrieben. In Safari funktioniert es perfekt, nur in Firefox macht es Probleme. Und zwar werden die Tabellenzeilen nicht wieder eingeblendet, wenn ich in dem Textfeld einen Buchstaben der eingegebenen Zeichenkette lösche. Woran kann das liegen?
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="generator" content="Adobe GoLive" />
  <title>Suche test</title>
  <script type="text/javascript">
  <!--
  function livesearch(text)
  {
   var zwischen;   //speichert Inhalt der Zelle
   var j_max;    //Anzahl der Zellen pro Zeile
   var result;    //speichert, ob ein Treffer gefunden wurde
   j_max=2;     //nach Bedarf anpassbar
   result=0;

for (var i=0; i < document.getElementsByTagName("tr").length; i++) {
    for(var j=0; j < j_max; j++) {
     zwischen = document.getElementsByTagName("tr")[i].cells[j].firstChild.nodeValue;
     if (zwischen.search(text) != -1) {
      result = 1;
     }
    }
    if(result == 0) {
     document.getElementsByTagName("tr")[i].style.display = "none";
    }
    if(result == 1) {
      document.getElementsByTagName("tr")[i].style.display = "marker";
      result=0;
    }
   }
  }
  //-->
  </script>
 </head>

<body>
 <form name="Formular">
  <table border="1">
  <tr><td>eins</td><td>zwei</td></tr>
  <tr><td>drei</td><td>vier</td></tr>
  <tr><td>fünf</td><td>sechs</td></tr>
  <tr><td>sieben</td><td>acht</td></tr>
  <tr><td>neun</td><td>zehn</td></tr>
  </table>
 <div style="position:fixed; height:100%; background-color:#808DBD; right:0px;" ><input name="suche" onkeyup="livesearch(document.Formular.suche.value)"></div>
 </form>
 </body>

</html>

  1. Hallo,

    ich habe folgendes Skript für eine Livesearch geschrieben. In Safari funktioniert es perfekt, nur in Firefox macht es Probleme. Und zwar werden die Tabellenzeilen nicht wieder eingeblendet, wenn ich in dem Textfeld einen Buchstaben der eingegebenen Zeichenkette lösche. Woran kann das liegen?

    document.getElementsByTagName("tr")[i].style.display = "marker";

    Wo ist die CSS-Eigenschaft display:marker definiert http://www.w3.org/TR/CSS21/visuren.html#display-prop? Du blendest eine Tabellenzeile aus. Um sie wieder einzublenden muss sie display:table-row bekommen.

    Allerdings ist es mit JavaScript relativ unkompliziert, die Standard-Eigenschaft wieder herzustellen. Man setzt dazu style.eigenschaft einfach auf einen Leerstring. Im Beispiel:
    document.getElementsByTagName("tr")[i].style.display = "";

    Weitere Verbesserungsvorschläge:
    Warum wendest Du document.getElementsByTagName("tr") so häufig an? Du arbeitest mit der cells-Collection. Die rows-Collection existiert ebenfalls. Du musst also nur vor allen Schleifen die Tabelle in eine Variable nehmen:

    var myTable = document.getElementsByTagName("table")[0];

    und greifst dann auf die Zeilen mit:

    myTable.rows.length

    bzw.:

    myTable.rows[i]
    ...
    myTable.rows[i].cells[j]
    ...
    myTable.rows[i].style.display = "";

    usw. zu.

    viele Grüße

    Axel

    1. vielen Dank für deine Hilfe - jetzt läufts endlich!