Tabelle filtern anhand Formulareingabe
Paul
- javascript
Hallo zusammen!
Nach Stunden des Suchens im www und Nicht-findens poste ich hier:
Ich habe eine Seite mit einer Tabelle, die je tr ein Produkt anzeigt und ein Formularfeld zur Eingabe einer Stückzahl »
<form action="send.php" method="post">
<table id="sf">
<tr>
<td width="10%"><img></td>
<td width="10%"><img></td>
<td><h1>Name</h1></td>
<td width="10%">Artikelnummer</td>
<td width="10%">Stueck</td>
<td width="10%">EUR</td>
<td width="10%"><input type="text" size="3" maxlength="3" name="Artikelnummer" value="" /></td>
</tr>
<tr>
<td width="10%"><img></td>
<td width="10%"><img></td>
<td><h1>Name</h1></td>
<td width="10%">Artikelnummer2</td>
<td width="10%">Stueck</td>
<td width="10%">EUR</td>
<td width="10%"><input type="text" size="3" maxlength="3" name="Artikelnummer2" value="" /></td>
</tr>
...
</table>
</form>
Jetzt möchte ich gerne mit JS die tr, bei denen keine Stückzahl eingegeben wird ausblenden. Leider konnte ich kein Script finden, dass genau zu meinem Problem passt finden.
Kennt ihr eines oder könnt mir helfen meinen Versuch zu modifizieren?
function anzeige() {
var wert=document.forms.elements.value;
for (var i = 0; i < wert.length; i++) {
if (wert>=0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
table.rows[r].style.display = displayStyle;
}
}
Freu mich über Hinweise...
Mahlzeit Paul,
Jetzt möchte ich gerne mit JS die tr, bei denen keine Stückzahl eingegeben wird
Das bedeutet, dass Du erst einmal innerhalb Deines Formulars bzw. innerhalb Deiner Tabelle <http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name@title=alle <input>-Elemente> <http://de.selfhtml.org/javascript/objekte/elements.htm#type@title=vom Typ "text"> finden und <http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=deren Inhalt ermitteln> musst.
Wenn dieser leer ist, kannst Du ja <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=den "Großvater" des aktuellen Elements> einfach ausblenden.
var wert=document.forms.elements.value;
Was genau erwartest Du bei dieser Art der Verwendung des Objekts http://de.selfhtml.org/javascript/objekte/forms.htm@title=forms in der Variablen "wert"?
MfG,
EKKi
Hallo und Danke EKKi!
Jetzt hab ich mich etwas reingelesen und bin soweit die Input-Felder mit type=text zu erkennen und values auszugeben und zu verändern (zur Kontrolle) »
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
var wert = "";
for (var i=0; i < inputs.length; i++) {
if (inputs[i].getAttribute('type') == 'text') {
var zahl = inputs[i].getAttribute('value');
if (zahl == 20) {zahl = "x";}
wert += zahl + "\n";
}
}
alert(wert);
</script>
Mein Versuch ungefüllte value zu verstecken läuft nicht, wo liegt der Fehler? Wie spreche ich jetzt den einzelnen tr an?
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
for (var i=0; i < inputs.length; i++) {
if (inputs[i].getAttribute('type') == 'text') {
var zahl = inputs[i].getAttribute('value');
if (zahl == "") {
inputs[i].parentNode.parentNode.style.display = "none";
}
}
</script>
var wert=document.forms.elements.value;
Was genau erwartest Du bei dieser Art der Verwendung des Objekts forms in der Variablen "wert"?
Ich hatte gehofft sofort den input value zu bekommen... aber ich hatte ja keine Ahnung.
Soweit aber schon sehr toll, danke.
Mahlzeit Paul,
Mein Versuch ungefüllte value zu verstecken läuft nicht,
"Läuft nicht" ist von der Aussagekraft in keinster Weise besser als "funzt net" ... was genau passiert (bzw. passiert nicht) an welcher Stelle? Was soll passieren? Was steht in der Fehlerkonsole?
inputs[i].parentNode.parentNode.style.display = "none";
Hast Du mal versucht Dir ausgeben zu lassen, um was für Werte/Objekte es sich dabei jeweils handelt?
alert(inputs[i]);
alert(inputs[i].parentNode);
alert(inputs[i].parentNode.parentNode);
alert(inputs[i].parentNode.parentNode.style);
alert(inputs[i].parentNode.parentNode.style.display);
wo liegt der Fehler?
Irgendwo in einem Skript ... ;-)
Wie spreche ich jetzt den einzelnen tr an?
Das kommt auf Deine Dokumentstruktur an.
var zahl = inputs[i].getAttribute('value');
Warum übrigens so kompliziert? Es gibt die Eigenschaft http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=value ...
MfG,
EKKi
nAbend EKKi,
Mahlzeit Paul,
Mein Versuch ungefüllte value zu verstecken läuft nicht,
"Läuft nicht" ist von der Aussagekraft in keinster Weise besser als "funzt net" ... was genau passiert (bzw. passiert nicht) an welcher Stelle? Was soll passieren? Was steht in der Fehlerkonsole?
sorry, für die undeutliche Ansprache
inputs[i].parentNode.parentNode.style.display = "none";
Hast Du mal versucht Dir ausgeben zu lassen, um was für Werte/Objekte es sich dabei jeweils handelt?
alert(inputs[i]);
alert(inputs[i].parentNode);
alert(inputs[i].parentNode.parentNode);
alert(inputs[i].parentNode.parentNode.style);
alert(inputs[i].parentNode.parentNode.style.display);
>
>
da werde ich morgen weitersehen...
>
> > wo liegt der Fehler?
>
> Irgendwo in einem Skript ... ;-)
>
immer!
>
> > Wie spreche ich jetzt den einzelnen tr an?
>
> Das kommt auf Deine Dokumentstruktur an.
>
>
> > var zahl = inputs[i].getAttribute('value');
>
> Warum übrigens so kompliziert? Es gibt die Eigenschaft <http://de.selfhtml.org/javascript/objekte/elements.htm#value@title=value> ...
>
das hab ich gesehen, wußte nur nicht, wie ich es nutzen kann;
vielen Dank für die gute Hilfe!
Pl
>
> MfG,
> EKKi
>
Hallo!
Ein einfacher Syntaxfehler hat das Script gehindert...
Hier der funktionierende Code:
Falls keine Eingabe erfolgt, wird die Tabellenreihe ausgeblendet (es sollte ein Reset angeboten werden)!
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Seite</title>
<script type="text/javascript">
function anzeigen () {
var inputs = document.getElementsByTagName("input");
for (var i=0; i < inputs.length; i++) {
if (inputs[i].getAttribute('type') == 'text') {
var zahl = inputs[i].value;
if (zahl == "") {
inputs[i].parentNode.parentNode.style.display = "none";
}
}
}
}
</script>
</head>
<body bgcolor="#ffffff">
<form method="post" onsubmit="anzeigen(); return false;">
<table>
<tr><td><input type="text" size="3" maxlength="3" name="Artikelnummer" value="" /></td></tr>
<tr><td><input type="text" size="3" maxlength="3" name="Artikelnummer" value="" /></td></tr>
<tr><td><input type="text" size="3" maxlength="3" name="Artikelnummer" value="" /></td></tr>
</table>
<p><input type="submit" name="ansehen" value="Bestellung ansehen" /></p>
</form>
</body>
</html>
Vielen Dank EKKi für die gute Anleitung und auf Bald!