Livesearch
Moritz
- javascript
1 Axel Richter0 Moritz
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>
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
vielen Dank für deine Hilfe - jetzt läufts endlich!