nicht angemeldet
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Matthias Apsel
Matthias Apsel
Matthias Apsel
Gunnar Bittersmann
Gunnar Bittersmann
Hallo,
ich muss in bestimmten Zeile Felder aktivieren und deaktivieren.
Dabei nutze ich $(' :radio').click(function(){});
um den Radio-Button zu ermitteln der den klick abgegeben hat.
Anschliessend ermittle ich mit
var child = $('#box-'+testTypeId +' tbody tr' ).length;
Das funktioniert nur bedingt. Zumindest solange keine weiteren tr Kindelememnte unter den tr-tags hinzukommen z.B. wenn dort ein <table><tr> aufgenmacht wird.
Gibt es eine Möglichkeit das ich mir das Kindelement ausgeben lasse von der der Klick auf den Radio-Button ausgelöst wurde?
Grüße
Gibt es eine Möglichkeit das ich mir das Kindelement ausgeben lasse von der der Klick auf den Radio-Button ausgelöst wurde?
Die Funktion, die bei einem Ereignis aufgerufen wird, bekommt ein Event-Objekt als Parameter übergeben. Darin möchtest du entweder .target oder .currentTarget auslesen.
Gibt es eine Möglichkeit das ich mir das Kindelement ausgeben lasse von der der Klick auf den Radio-Button ausgelöst wurde?
Die Funktion, die bei einem Ereignis aufgerufen wird, bekommt ein Event-Objekt als Parameter übergeben. Darin möchtest du entweder .target oder .currentTarget auslesen.
Hallo,
hoffe ich das ich es diesmal besser erklären kann
Wie ich ermittle auf welchen radio geklickt wurde weiss ich.
Das ermittle ich schon.
Aber angenommen dieser Radio ist in der 5. Zeile von insgesamt 10 so kann ich die Gesamtanzahl aller Kindelemente zwar anfragen und bekomme dann 10 geliefert aber ich weiss immer noch nicht an welcher Stelle der Radio sitzt der geklickt wurde.
Wenn der an der 5. Stelle sitzt von insgesamt 10 Kindelemementen dann suche ich eine Funktion die mir in diesem Beispiel die zahl 5 ausgibt
ist das besser zu verstehen?
Grüße
Om nah hoo pez nyeetz, Rainerme!
Wenn der an der 5. Stelle sitzt von insgesamt 10 Kindelemementen dann suche ich eine Funktion die mir in diesem Beispiel die zahl 5 ausgibt
ist das besser zu verstehen?
Dein Lösungsversuch scheint mir nicht zielführend zu sein. Beschreibe doch mal, was du machen möchtest.
Matthias
Hallo
ich will es versuchen.
Ich habe eine Art Tabelle in der ich Zeilen nachlade.
In jeder Zeile gibt es einen Radio-Button und Eingabefelder.
Da ich mehrere Tabellen habe und immer mit den gleichen Eingabefeldern muss ich mit einer ID arbeiten die jede Tabelle hat.
um dann festzustellen in welcher Zeile der Radio geklickt wurde löste ich das bis jetzt so.
Ich ermittle die Anzahl der Kindelemente.
Da ich weiss das es eh nur die Viert-letzte Zeile sein kann in der der Radio geklickt wurde (das zu erklären wäre zu verwirrend)
ermittle ich die Anzahl der Kindelemente und ziehe 4 ab.
Das funktionierte perfekt solange ein Kindelement so bestand (auf korrekte Darstellunfg verzichte ich da es so klar werden sollte)
<div id=box-1>
Camping_RIDER
<table>
<tbody>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
</tbody>
</table>
</div>
mit var child = $('#box-1 tbody tr' ).length;
bekomme ich die Anzahl aller Kindelemente
mit var ort = $('#box-1 tbody tr' ).length - 3;
erhalte ich den letzten Radio.
Da ich jedoch nun in die Tabelle ein Slider-Plugin lade was wieder tr-tags hat
sieht das ungefähr so aus
<table>
<tbody>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr>td>
<table>
<tr><td>
</td></tr>
<tr><td>
</td></tr>
</table>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
</tbody>
</table>
</div>
Da ich wieder den letzten Radio benötige sollte das eigentlich kein Problem sein.
ich ermittle die ganzen Kindelemente und zeihe wieder 3 ab
Nur das geht nicht.
Wieso?
keine Ahnung
Im Firefox sehe ich das der Radio immer noch an der Viert-letzten-Stelle sitzt
also sollte die Berechnung stimmen.
Aber es geht halt nicht.
Nun suche ich nach einer Möglichkeit die Stelle des Radios auf den geklickt wurde anders zu ermitteln
Grüße
Om nah hoo pez nyeetz, Rainerme!
Nun suche ich nach einer Möglichkeit die Stelle des Radios auf den geklickt wurde anders zu ermitteln
Warum musst du deiner Meinung nach die Stelle wissen?
Matthias
Om nah hoo pez nyeetz, Rainerme!
Nun suche ich nach einer Möglichkeit die Stelle des Radios auf den geklickt wurde anders zu ermitteln
Warum musst du deiner Meinung nach die Stelle wissen?
Matthias
Hallo
ganz einfach, weil ich die Zeilen manipulieren muss
Beispiel:
bei Klick auf radio-1 dann 4 Felder grün, rest weiss, bei Klick auf Radio 2. 4 grüne Felder weiss und sperren und Rest grün...
Zum Ändern bzw. manipulieren verwende ich auch jquery, das funktioniert auch... nur eben solange ich die zeilen eindeutig ermitteln kann.
wenn jedoch unterhalb der <tr> Kindelemente weitere <tr> Kindelemenet hinzugefügt werden weil dort z.B. eine <table> ist dann zählt er zwar auch diese Kindelemente nur klappt das dann nicht die Zeilen anzusprechen.
Er gibt mir z.B. die 6. Zeile (child) aus. wenn ich mit lenght die Kindelemente abfrage und dann 3 Zeilen abziehe.
mit
var veg = $('#box-'+TypeId+' tbody:nth-child('+child+') input:radio:checked[name="radio-'+week+'"]').val();
greife ich z.B. auf den radio zu oder eben auf die Textfelder da ich ja den child habe.
wenn siech jedoch wie oben weitere Kindelemente unterhalb der tr tags befinden wie die <table> dann zählt er zwar richtig aber ich kann aus welchen gründen auch nicht darauf zugreifen.
ich habe die <tr> tags schon unter firefox gezählt... das passt alles...
Da ich nicht dahinter komme suche ich nun eine Möglichkeit das Kindelement zu ermitteln von wo aus der radio angeklickt wurde
Sorry aber besser kann ich es nicht beschreiben
Grüße
@@Rainerme:
nuqneH
Sorry aber besser kann ich es nicht beschreiben
Dann verlinke deine Seite, damit man sich ein Bild machen kann, worum es eigentlich geht.
Qapla'
@@Rainerme:
nuqneH
Sorry aber besser kann ich es nicht beschreiben
Dann verlinke deine Seite, damit man sich ein Bild machen kann, worum es eigentlich geht.
Qapla'
das kann ich leider nicht da sie lokal läuft und alles andere zu aufwändig wäre.
aber ist doch eigentlich ganz einfach zu verstehen oder?
ich möchte das Kindelement ermitteln also in meinem Fall <tr> von dem der radio aus abgefeuert wurde.
Ich verstehe da gerade nicht was an dieser Frage so unverständlich ist.
ich möchte das Kindelement ermitteln also in meinem Fall <tr> von dem der radio aus abgefeuert wurde.
Ich verstehe da gerade nicht was an dieser Frage so unverständlich ist.
Es ist nicht ersichtlich, was du brauchst. Ein Objekt, die Zeilennummer, beides?
Da du verschachtelte Tebellen benutzt, ist auch unklar ob die radio-Buttons sich nur auf der ersten Tabellen-Ebene befinden, oder auch hier eine Verschachtelung möglich ist. Die Frage ist, was dann ausgegeben werden soll.
Dann verwechselst du Kindelement mit Elternelement, was das Ganze auch nicht gerade einfacher macht.
Hallo,
Es ist nicht ersichtlich, was du brauchst. Ein Objekt, die Zeilennummer, beides?
genau das hatte ich schon mehrmals beantwortet
Ich benötige nicht das Objekt, ich benötige die Stelle an der, der tr Tag ist
Nochmals
wenn ich einen Aufbau habe wie folgt und ich alle tr Kindelemente suche
<div id=box-1>
<table>
<tbody>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio name=findemich></td><td><input type=text name=testname></td></tr> //den suche ich ich
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
</tbody>
</table>
</div>
was ist daran unklar ?
Lasse ich mir die Anzahl der Kindelemente ausgeben erhalte ich 7 zumindest gibt mir das
$('#box-'+TypeId +' tbody tr' ).length;
aus.
mit
var week = $('#box-'+TypeId +' tbody tr' ).length - 3; //Punkt1
var name = "testname";
// Punkt1 //
$("#box-"+TypeId+" tbody tr:nth-child("+week+") input[name='"+name+"']").prop('disabled', true);
disable ich in child 2 das Textfeld mit dem Namen "testname".
da in diese Tabelle nicht nur einzelne Zeilen nachgeladen werden sondern auch Verschachtelungen
wie z.B. eine weitere Tabelle in einer Zeile
z.B. so
<div id=box-1>
<table>
<tbody>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio name=findemich></td><td><input type=text name=testname></td></tr> //den
<tr><td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td></tr>
suche ich ich
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
</tbody>
</table>
</div>
dann erhalte ich mit
var week = $('#box-'+TypeId +' tbody tr' ).length - 6; // da ich nun 9 Kindelemente habe
var name = "testname";
$("#box-"+TypeId+" tbody tr:nth-child("+week+") input[name='"+name+"']").prop('disabled', true);
Lade ich jetzt nochmals eine Zeile dazu
fängt das Problem an, da er die Angabe des Child (siehe oben Punkt1 )die ich mache, nicht mehr findet
<div id=box-1>
<table>
<tbody>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td></tr>
<tr><td><input type=radio name=findemich></td><td><input type=text name=testname></td></tr> //den
suche ich jetzt
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
</tbody>
</table>
</div>
Da nun 10 Childs vorhanden sind und ich wieder einfach 3 abziehen müsste um das 7. Childelement zu finden , müsste er eigentlich die richtige Zeile also das richtige Child finden.
Geht aber nicht.
Da du verschachtelte Tebellen benutzt, ist auch unklar ob die radio-Buttons sich nur auf der ersten Tabellen-Ebene befinden, oder auch hier eine Verschachtelung möglich ist. Die Frage ist, was dann ausgegeben werden soll.
Wurde das oben nun klarer?
was ist daran so missverständlich?
Meine Denkweise geht dahin.
wenn ich mir mit jQuery die Anzahl der Childs ausgeben lasse so hoffe ich mal das jQuery diese auch sauber ermittelt.
Wenn mir 10 ausgegeben werden und ich mir anschliessend den Quellcode ansehe, so kann ich auch nur 10 tr-tags finden. Also vermute ich das dies richtig ist.
Wenn ich dann noch sehe das meine gesuchte Zeile also mein gesuchtes Child an der 7. Stelle ist, frage ich mich wieso jQuery dann diese Zeile nicht mehr findet wenn ich von 10 3 abziehe und mit
// week bedeutet hier eigentlich das child !!!
$("#box-"+TypeId+" tbody tr:nth-child("+week+") input[name='"+name+"']").prop('disabled', true);
Frage:
ist es richtig, das man unter javascript zwar das erste Child, das letzte, die Azahl der Childs ermitteln kann, jedoch man nicht ermitteln kann das wievielte Child-Element es ist, wo gerade ein Radio angeklickt wurde?
Das würde mich fast wundern wenn das so wäre.
Grüße
Om nah hoo pez nyeetz, Rainerme!
Nochmals
Und wieder beschreibst du nur die Probleme, die bei der Umsetzung deines Lösungsversuchs auftreten.
mit
var week = $('#box-'+TypeId +' tbody tr' ).length - 3; //Punkt1
var name = "testname";
// Punkt1 //
$("#box-"+TypeId+" tbody tr:nth-child("+week+") input[name='"+name+"']").prop('disabled', true);
> disable ich in child 2 das Textfeld mit dem Namen "testname".
Warum wird gerade dieses Textfeld disabled? Welcher Zusammenhang besteht zwischen gecklicktem Radiobutton und Textfeld, das disabled werden soll?
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Pluto und Plutonium](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=P#pluto).
Hallo
es geht ja jetzt aber ich des Antstandshalber hier die Erklärung dazu abgeben
Warum wird gerade dieses Textfeld disabled? Welcher Zusammenhang besteht zwischen gecklicktem Radiobutton und Textfeld, das disabled werden soll?
Matthias
Ich habe 8 Eingabefelder, wobei stets nur 4 davon aktiv sein dürfen.
Entweder der User füllt die einen 4 aus oder die anderen 4.
um den User dazu zu zwingen Felder auszuwählen habe ich per default alle Felder disabled.
Nun hat der User pro Zeile zwei radio-Buttons.
Er klickt auf links oder rechts.
Je nachdem werden die einen oder anderen Felder beschreibbar gemacht.
da ich mit Templates arbeite (sind eigentlich nur die Eingabezeilen die via Ajax nachgeladen werden)
wollte ich nicht für jede Eingabezeile und jedes Input-feld verschiedene name= Attribute vergeben
In jeder zeile gibt es also 8 versch. name= Attribute jedoch jede Zeile hat die Gleichen.
Damit ich nun eine Eindeutigkeit habe (da ich mit Registerkarten arbeite und Zeilen also die Pseudo-Formulare nur via Ajax nachlade und somit alter HTML-Code im Hintergrund erhalten bleibt) durch die Container-ID
brauchte ich noch eine Möglichkeit um eindeutig auf die Zeilen in dem Container zugreifen zu können.
Dazu versuchte ich mich an child's und versuchte hier alle tr-tags die unter dem parent angelegt wurden zu suchen.
Da ich dachte das er nur die erste Hirachie findet also alle tr-tags die direkt unter dem tbody liegen, dachte ich es geht.
Da ich nun jedoch ein jquery Range-Slider Plugin auch je nach Bedarf geladen habe, bekam ich Probleme um auf die <tr> tags zuzugreifen.
Ich brauche also die Zeilen-Nr um dann später die Zeile manipulieren zu können
@@Rainerme:
nuqneH
Ich brauche also die Zeilen-Nr um dann später die Zeile manipulieren zu können
Nochmal: Nein.
Aber man kann sich ja den Mund fusslig reden.
Qapla'
Hallo,
Hallo.
Frage:
ist es richtig, das man unter javascript zwar das erste Child, das letzte, die Azahl der Childs ermitteln kann, jedoch man nicht ermitteln kann das wievielte Child-Element es ist, wo gerade ein Radio angeklickt wurde?
Das würde mich fast wundern wenn das so wäre.
Die Beharrlichkeit, mit der du die Posts von mir und auch 1UnitedPower ignorierst ist schon bemerkenswert, ehrlich! Darum ist das jetzt das letzte Mal, dass ich dir hierzu was sage:
Vorausgesetzt, deine Buttons befinden sich immer an der gleichen Position, kannst du dir die Nummer der <tr> in welcher der Button geclickt wurde ganz einfach ausgeben lassen, indem du die von 1UnitedPower gepostete Funktion an deine Hierarchien anpasst und dann mit dem auslösenden <input> Element als Parameter ausführst.
Ob es für dein Vorhaben nicht auch eine insgesamt bessere Lösung gibt, bleibt dahingestellt, aber jedenfalls ist es in JavaScript KEIN Problem sich aus einer Nodelist die Position eines bestimmten Elementes ausgeben zu lassen. Siehe Oben.
Gruß,
Roadster.
@@Roadster:
nuqneH
Die Beharrlichkeit, mit der du die Posts von mir und auch 1UnitedPower ignorierst ist schon bemerkenswert, ehrlich!
Meine auch! Denn ich glaube immer noch nicht, dass man die Nummer des Elements zu irgendwas benötigt.
Qapla'
@@Roadster:
nuqneH
Hallo Gunnar,
Meine auch! Denn ich glaube immer noch nicht, dass man die Nummer des Elements zu irgendwas benötigt.
Tja, soweit das aus der kryptischen Problembeschreibung des TO hervorgeht, kann ich das auch nicht wirklich nachvollziehen, aber er wollte es ja unbedingt wissen...
Ich staune auch, dass er keinem seiner Buttons eine ID gegeben hat, geschweige denn den <tr> Elementen, wenn sie für seine Funktionen schon so eminent wichtig sind...
Zum Ändern bzw. manipulieren verwende ich auch jquery, das funktioniert auch... nur eben solange ich die zeilen eindeutig ermitteln kann.
Für mich nur ein weiterer Beleg dafür, dass die Verwendung von jQuery & Co. nur dann Sinn ergibt, wenn man ohnehin weiß, was man tut...
Gruß,
Roadster.
Aloha ;)
Für mich nur ein weiterer Beleg dafür, dass die Verwendung von jQuery & Co. nur dann Sinn ergibt, wenn man ohnehin weiß, was man tut...
Du machst da eine Baustelle auf, die er vor Wochen bei mir schon nicht verstanden hatte...
Oder zwei Postings vor dem Verlinkten: "jQuery benutzen ohne JavaScript zu können ist wie ein Rennauto ohne Führerschein zu fahren."
Da rennen wir aber wohl gegen eine Wand...
Grüße,
RIDER
Aloha ;)
Hallo RIDER :)
Du machst da eine Baustelle auf, die er vor Wochen bei mir schon nicht verstanden hatte...
Schön zusammengefasst.
Ich denke, es kommt halt darauf an, was die eigenen Ansprüche sind.
Wenn jemanden das Programmieren absolut überhaupt nicht interessiert und er oder sie nur für ein konkretes Problem - unterhalb der Schwelle der Sinnhaftigkeit der Inanspruchnahme professioneller Hilfe - eine vorgefertigte Lösung sucht, die mit möglichst wenig Aufwand zu realisieren ist, wäre es vermessen das von der hohen Warte aus zu kritisieren, - denn dann kann es im Einzelfall tatsächlich die beste Lösung sein, einfach beim Einbau der Instantlösung à la jQuery behilflich zu sein. Da wäre dann allen Seiten bestens mit gedient.
Was ich aber überhaupt nicht nachvollziehen kann ist, wenn Leute durchaus den persönlichen Entschluss erkennen lassen, sich eingehender mit der Materie zu befassen, dann aber nicht die Bereitschaft zeigen, sich zunächst einmal wenigstens mit den grundlegendsten Konzepten vertraut zu machen, sondern aus purer Bequemlichkeit heraus und ohne Not die vermeindliche Abkürzung zum Erfolg via jQuery & Co. nehmen. Ich meine das ist doch klar, dass sich das früher oder später rächt.
Also ich für meinen Teil möchte, zumindest im Rahmen meiner realistischen Möglichkeiten, gerne verstehen, was ich so mache, bevor ich es mache. Zumal ich sonst auch das Gefühl hätte, mich irgendwie selbst zu bescheißen, ich meine, das wäre sonst wie Poker mit offenen Karten und ohne Einsatz zu spielen oder sich Geld aus der eigenen Geldbörse zu stehlen. Einfach irgendwie sinnlos.
Naja, aber was weiß ich schon. ;)
Gruß,
Roadster.
Folgendes script sollte deinen Anforderungen gerecht werden.
Ich habe deinen HTML-Code übernommen.
Was hälst du davon?
$(':radio').click(function(){
var tr = $(this).closest('tr'); // zeilen objekt evtl. tr[0]
var tr_index = tr.index() + 1; // zeilen index +1
// POC
alert($(this).attr('name') + ' befindet sich in Zeile '+ tr_index);
});
Hallo ihr Genies,
es ist einfach unfassbar, der Lösungsvorschlag von mark geht
aber wiiiiisooo ?
mir leuchte ein das hier nur die direkt unterhalb von tbody erstellten <tr>'s gezählt werden, leuchtet mir ein... aaaeber
Ich greife immer noch mit der gleichen Variante auf meine Zeilenmanipulation zu wie zuvor auch also mit
// child enthält dabei die ermittlte Zeilenzahl aus dem Lösungsvorschlag von mark.
$( "#box-"+TypeId+" .week:nth-child("+child+") input[name*='"+on+"']" ).each(function() {
var name = $(this).attr("name");
var val = $(this).val();
$(this).val("");
});
Das Einzige was ich zuvor abgeändert habe ist der Selector
statt
$( "#box-"+TypeId+" tbody tr :nth-child("+child+")
greife ich nun mit
$( "#box-"+TypeId+" .week:nth-child("+child+")
auf die Zeile zu.
Ich habe dabei nun jedem <tr> Tag ein class="week" verpasst.
Was mich jedoch wundert ist
nth-child("+child+")
Denn für mein Verständnis ist nth-child abhängig von allen child's unterhalb ihres parents.
Und genau wegen dieser gab es ja die Probleme.
Mir leuchtet das gerade nicht ein wieso es nun geht...
Hat jemand eine erklärung dazu?
Vielen vielen dank für Eure Geduld und Hilfe
und beste Grüße
es ist einfach unfassbar, der Lösungsvorschlag von mark geht
Der Lösungsvorschlag von Roadster würde auch "gehen", wenn du ihn verstanden hättest.
Der Code von Roadster hat mit deinem CSS-Selektor nicht harmoniert, da CSS-Selektoren per Definition einen 1-index haben und Roadster für die Zeilenangaben einen 0-index verwendet.
POC: http://jsfiddle.net/yo12pnkL/
aber wiiiiisooo ?
Ich glaube, es lag daran, dass du deinen CSS-Selektor geändert/korrigiert hast.
Das Einzige was ich zuvor abgeändert habe ist der Selector
statt
$( "#box-"+TypeId+" tbody tr :nth-child("+child+")
greife ich nun mit
$( "#box-"+TypeId+" .week:nth-child("+child+")
.. und genau da lag wahrscheinlich der Fehler.
Eine fundamentale Kompetenz, um Code zu verstehen ist das Debugging. Du musst lernen deinen Code zu debuggen. Spätestens, wenn du console.log() verwendest wirst du sehen, dass beide Ausdrücke sehr unterschiedliche Ergebnisse liefern.
Dies liegt an den unterschiedlichen css-Selektoren:
$(#box-"+TypeId+" tbody tr :nth-child("+child+"));
Hier machst du zweierlei Fehler.
1. "tbody tr" Selektiert _ALLE_ tr-Elemente in tbody, also auch jene, die von deinem Slider-Plugin geladen werden (Unterschied descendant und child). Wenn du nur die tr-Elemente in der ersten Tabellen-Ebene selektieren (child) möchtest, machst du das mit dem child-Selektor ">";
Unterschied: tbody tr und tbody > tr.
2. "tr :nth-child()" Da gehört offensichtlich kein Leerzeile zwischen tr und :nth-child(). Du möchtest ja die N-te tr-Zeile selektieren. Das macht man ohne Leerzeile: tr:nth-child.
Leider reicht mein Wissen nicht aus, um zu erklären, wie sich jQuery, oder CSS verhält, wenn das nth-child nicht vorhanden ist.
Korrigiert sieht das dann z.B. so aus:
$(#box-"+TypeId+" tbody > tr:nth-child("+child+"));
Diese korrigierte Version ist nun für deine Anwendung und nur für deine Anwendung identisch mit:
$( "#box-"+TypeId+" .week:nth-child("+child+"));
So sollten beide Varianten funktionieren.
ABER, ABER, ABER,...
// child enthält dabei die ermittlte Zeilenzahl aus dem Lösungsvorschlag von mark.
$( "#box-"+TypeId+" .week:nth-child("+child+") input[name*='"+on+"']" ).each(function() {
var name = $(this).attr("name");
var val = $(this).val();
$(this).val("");
});
Dieser Code ist, wie schon von jedem hier in weiser Vorhersehung angemerkt, überflüssig. Du brauchst keine Zeilennummer, um anschließend ein Objekt der Zeile zu erhalten. Weil du das Objekt der Zeile ja schon hast.
Weiters brauchst du kein each(). Wenn deine Funktion korrekt arbeitet bekommst du als Rückgabewert nur \_EIN\_ Objekt, und nicht eine Liste von Objekten. Sprich der user kann immer nur auf eine Zeile klicken und nicht gleichzeitig auf mehrere.
Bei meinem Code ist das Zeilen-Objekt schon in der Variable tr drin. `var tr = $(this).closest('tr');`{:.language-javascript} Mit der Variable tr kannst du die Zeile beliebig manipulieren. In Roadsters Code ist die Zeile in der Variable c[i].
Om nah hoo pez nyeetz, mark!
- "tr :nth-child()" Da gehört offensichtlich kein Leerzeile zwischen tr und :nth-child(). Du möchtest ja die N-te tr-Zeile selektieren. Das macht man ohne Leerzeile:
tr:nth-child.
Leider reicht mein Wissen nicht aus, um zu erklären, wie sich jQuery, oder CSS verhält, wenn das nth-child nicht vorhanden ist.
Leerzeichen, nicht Leerzeile ;-)
tr:nth-child(3)
~~~ - selektiert die 3. Zeile
~~~css
tr :nth-child(3)
~~~ ist gleichbedeutend zu
~~~css
tr *:nth-child(3)
~~~ und selektiert in einer ordentlichen Tabelle (unter anderem) die td oder th der 3. Spalte. (Und alle anderen Drittgeborenen Kindeskinder, Urenkel, ... ;-))
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [digital und Digitalis](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=D#digital).
Danke für die Korrektur und Erklärung.
Om nah hoo pez nyeetz, Reinerme!
ich möchte das Kindelement ermitteln also in meinem Fall <tr> von dem der radio aus abgefeuert wurde.
Ich verstehe da gerade nicht was an dieser Frage so unverständlich ist.
Die Frage bleibt, was du erreichen möchtest. Wenn du etwa an dieser Stelle neue Zeilen einfügen möchtest, musst du die Zahl nicht wissen.
$(this).parents('tr').after('<tr><td>neuer Inhalt</td></tr>');
Auch um von da ab die nächsten 4 Zeilen zu färben, brauchst du die Nummer nicht zu wissen.
Du setzt eine Klasse in der Tabellenzeile und könntest dann das CSS
.mark,
.mark + tr,
.mark + tr + tr,
.mark + tr + tr + tr {
background: green;
}
verwenden, Zuerst musst du ggf. noch „alte“ Klassen "mark" entfernen.
Du siehst, es kommt sehr auf den konkreten Anwendungsfall an. Ich vermute, dass auch dein Fall ohne Kenntnis der konkreten Zahl lösbar ist.
PS: bei bplaced.net kann man Beispiele kosten- und werbefrei hochladen.
Matthias
Hallo,
das mit Fiddle und den anderen Testservern kenne ich schon, das ist aber in meinem Fall ein wahnsinniger Aufwand das dort nachzustellen
ich lade via ajax Zeilen nach die aus einer anderen php-seite generiert werden
also einfach gesagt, Templates.
Im Grunde handelt es sich um eine ART Formular.
Das mit den Childs finden, die Zeilen also dort die Input-felder zu manipulieren bei klick auf des Radios in der zeile funktioniert 1a solange ich nur eine Zeile nachlade.
Bei einem bestimmten Fall wird jedoch ein JSlider geladen.
Das besteht aus einer normalen Zeile und in der nächsten ist ein <table> mit dem slider als Inhalt.
Beispiel:
Am Anfahg habe ich eine eingabezeile, Leerzeile, Buttonzeile, und Zeile für eine Infobox also 4 Zeilen ,also 4 childs die er auch sauber anzeigt
Es werden alle Zeilen immer in die Buttonzeile eingesetzt, auch die mit dem Slider.
so bleibt der Button und die Folgezeilen bis zum Schluss immer an der gleichen Stelle und ich weiss wenn ich 3 zeilen abziehe dann habe ich die letzte Zeile.
Das geht einfach da ich die child's zähle.
Wie gesagt es funktioniert solange bis der Slider geladen wurde.
Normal stört das nicht wenn man auch gerade in der 3. bearbeitungszeile wäre und er ausgibt das er 9 childs hat, wäre das egal wenn ich ja weiss das ich nur 3 abziehen muss.
Im Quelltext sehe ich das genau an dieser Stelle meine Zeile auch ist nur findet Javascript sie nicht wenn ich mit der childnummer drauf zugreife.
Das dort nachzustellen, da kann ich die Seite gleich neu programmieren...
Bitte nicht falsch verstehen ich hoffe das ihr mir so weiterhelfen könnt
Es muss doch möglich sein mir eine einfache Frage zu beantworten...
Gibt es eine Möglichkeit das man sich die Childnummer ausgeben lässt?
Es gibt doch da fast alles... das letzte Child, das erste, wieviele es gibt... alles geht... aber die Childnummer????
Ist das so schwer diese Frage zu beantworten?
Grüße
Hallo,
Hallo.
Gibt es eine Möglichkeit das man sich die Childnummer ausgeben lässt?
Es gibt doch da fast alles... das letzte Child, das erste, wieviele es gibt... alles geht... aber die Childnummer????Ist das so schwer diese Frage zu beantworten?
Liest du eigentlich auch die Posts hier in deinem Thread? - Ich meine wirklich?
Ich habe dir nun schon mehrfach (!) und in aller Ausführlichkeit (!) beschrieben, wie du an die Nummer kommst, indem du durch die child-Elements von <tbody> loopst...
Aber ich werde meine Beiträge jetzt hier nicht nochmal verlinken, denn in der Tat ist das wohl nur die zweitbeste Lösung und es geht offenbar auch deutlich eleganter.
Deshalb wäre es gut, wenn du dir den Post von 1UnitedPower mal genauer anschauen würdest, der von JavaScript deutlich mehr Ahnung hat als ich, und der uns hier eine sehr schöne Methode präsentiert, wofür ihm auch von meiner Seite aus Dank gebührt.
Gruß,
Roadster
Om nah hoo pez nyeetz, Rainerme!
das mit Fiddle und den anderen Testservern kenne ich schon, das ist aber in meinem Fall ein wahnsinniger Aufwand das dort nachzustellen
bei bplaced.net kannst du die komplette Seite einfach hochladen.
Ist das so schwer diese Frage zu beantworten?
Ich bin nach wie vor der Meinung, dass du die konkrete Zahl nicht brauchst.
Matthias
@@Reinerme:
nuqneH
Sorry aber besser kann ich es nicht beschreiben
Dann verlinke deine Seite, damit man sich ein Bild machen kann, worum es eigentlich geht.
das kann ich leider nicht da sie lokal läuft und alles andere zu aufwändig wäre.
Dein Problem mal auf JSFiddle oder Codepen nachzustellen ist aufwendiger als versuchen, es zu beschreiben? Besonders, wenn du dich mit letzterem unglaublich schwertust?
aber ist doch eigentlich ganz einfach zu verstehen oder?
ich möchte das Kindelement ermitteln also in meinem Fall <tr> von dem der radio aus abgefeuert wurde.
Ich hätte gern gewusst, was das Problem ist; nicht das, was du als Lösung ansiehst.
Qapla'
Hallo,
Hallo.
Aber angenommen dieser Radio ist in der 5. Zeile von insgesamt 10 so kann ich die Gesamtanzahl aller Kindelemente zwar anfragen und bekomme dann 10 geliefert aber ich weiss immer noch nicht an welcher Stelle der Radio sitzt der geklickt wurde.
Wenn der an der 5. Stelle sitzt von insgesamt 10 Kindelemementen dann suche ich eine Funktion die mir in diesem Beispiel die zahl 5 ausgibt
Von jQuery hab ich keine Ahnung, aber in pure JS würde ich für die Zielfunktion sagen...
function( e ) {
var e = e || window.event;
var target = e.target || e.srcElement;
var p = target.parentElement;
var c = p.children;
for ( var i = 0; i < c.length; i++ ) {
var btn = c[ i ];
if ( btn === target ) {
return i;
break;
}
}
}
...keine Ahnung obs dir weiterhilft. Nur eine Idee.
Gruß,
Roadster
Hallo
Das probier ich mal danke...
...keine Ahnung obs dir weiterhilft. Nur eine Idee.
Gruß,
Roadster
Hallo
Hallo.
Muss Mark und Matthias recht geben, dass du dir das Leben wahrscheinlich unnötig schwer machst, aber wenn du es mit meiner Funktion versuchst, müsstest du das natürlich noch anpassen.
Wenn du den Button selbst suchst, ist die Sache mit der Vergabe einer ID gegessen, aber wenn du die <tr> suchst, in der der Button ist, und du den "click" EventListener an <table> oder <tbody> gehängt hast, muss das für meine Beispielfunktion natürlich dahingehend berücksichtigt werden, dass der Button <input> Kindelement von <td> ist, was wiederum Kindelement von <tr> ist, was wiederum Kindeelement von <tbody> ist. ( Man korrigiere mich, wenn ich Blödsinn rede. )
Also sollte...
var p1 = target.parentElement; // <td>
var p2 = p1.parentElement; // <tr>
var p = p2.parentElement; // <tbody>
var c = p.children // das sind die <tr>
// loop durch die Rows wie im Beispiel aber dann statt var btn = c[ i ];
var td = c[ i ].firstElementChild; // <td> in <tr>
var btn = td.firstElementChild; // <input> in <td>
if ( btn === target ) // etc...
Gruß,
Roadster
Hallo.
[...] und du den "click" EventListener an <table> oder <tbody> gehängt hast[...]
Ignore that! Das ist Wurst. Ansonsten viel Erfolg.
Gruß,
Roadster
Hallo
By the way:
Da du ja ohnehin schon weißt, dass die gesuchten <tr> Kindelemente von <tbody> sind, kannst du dir den ganzen Quatsch mit p1, p2 auch sparen und gleich den <tbody> an die Variable 'p' hängen.
Wenn du's ansonsten so machst wie beschrieben gibt dir die Funktion dann für 'i' die Position der <tr> in <tbody> an, in welcher der Button geclickt wurde.
Gruß,
Roadster
Hallo,
Du hast es schon genau richtig erkannt.
Ich suche die ZEILE also <tr> in der der radio-button geklickt wurde und zwar in Form einer Zahl.
besser und noch genauer gesagt, suche ich das Kindelement <tr> des parent tbody in der der radioo-button geklickt wurde
Und nochmals:
damit es nicht zu missverständnissen kommt
<tbody>
hat z.b.
3 <tr>
das sind alles Kinder von tbody... wenn in der zweiten Zeile der radio geklickt wurde erhalte ich die Zahl 2
somit kann ich dann umgekehrt mit das zweite child element zugreifen und verändern
Grüße
wow.. hoffe das war nun klarer :)
@@Rainerme:
nuqneH
Ich suche die ZEILE also <tr> in der der radio-button geklickt wurde und zwar in Form einer Zahl.
Du suchst ausgehend vom jeweiligen input-Element das nächst höhere tr-Vorfahrenelement? Wozu als Zahl?
das sind alles Kinder von tbody... wenn in der zweiten Zeile der radio geklickt wurde erhalte ich die Zahl 2
somit kann ich dann umgekehrt mit das zweite child element zugreifen und verändern
Warum über den Index, wenn du das Element schon hast?
Qapla'
Hallo.
Alter Schwede. Also erstmal gibst du deinem <tbody> eine ID, damit wir damit auch was anfangen können:
<table>
<tbody id="tbodyBox1">
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td><input type=radio></td><td><input type=text></td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
<tr><td>irgendwas</td></tr>
</tbody>
</table>
</div>
In JS dann...
~~~javascript
var tbodyBox1 = document.getElementById( "tbodyBox1" );
tbodyBox1.addEventListener( "click", box1btnsOnClick );
function box1btnsOnClick( e ) {
var e = e || window.event;
var target = e.target || e.srcElement;
var num = getRow( target ); // num ist dann die Position der <tr> in <tbody>, wo der Click war
function getRow( elm ) {
var c = tbodyBox1.children; // die <tr>
for ( var i = 0; i < c.length; i++ ) {
var td = c[ i ].firstElementChild; // <td> in <tr>
var btn = td.firstElementChild; // <input> in <td>
// ...oder .lastElementChild oder c[ n ] bzw. td[ n ], wenn du die Positionen veränderst...
if ( btn === elm ) {
return i;
break;
}
}
}
// ...plus das, was du sonst noch so damit machen willst...
Gruß,
Roadster.
Hallo,
Hallo.
Du hast es schon genau richtig erkannt.
Ich suche die ZEILE also <tr> in der der radio-button geklickt wurde und zwar in Form einer Zahl.
besser und noch genauer gesagt, suche ich das Kindelement <tr> des parent tbody in der der radioo-button geklickt wurde
Also wenn du es so machst, wie von mir beschrieben, bekommst du für die var num eine Zahl ausgespuckt, welche die Position der <tr> innerhalb des <tbody> angibt, in welcher der Button geclickt wurde.
Wenn du diese Zahl aber nicht als Variable brauchst, sondern lediglich das Elternelement des geclickten Buttons suchst, um damit direkt was zu machen, kannst du dir den for-loop auch sparen und einfach var td = target.parentElement; und var tr = td.parentElement; schreiben. Dann ist tr die <tr> in welcher der click stattfand.
Also was brauchst du? Die Positionsangabe der <tr> in Form einer Zahl als Variable, oder einfach nur das <tr> Element selbst, innerhalb dessen der click stattfand? - Antwort s.o.
Nichtsdestoweniger wird, wie hier schon angedeutet wurde, für dein 'Problem' aber womöglich eine andere Lösung (in CSS) zielführender sein...
Gruß,
Roadster.
Hakuna matata!
function( e ) {
Es ergibt wenig Sinn die Funktion als Event-Handler zu registrieren, weil dann der Rückgabewert einfach verloren ginge. Es besteht auch kein Grund die Funktion so zu schreiben, dass sie nur mit Event-Objekten arbeitet, sie könnte viel allgemeiner für HTMLElemente geschrieben werden, dadurch wäre sie häufiger wiederverwendbar.
> var e = e || window.event;
> [/code]
Das kann man sich in modernen Browsern sparen.
> ~~~javascript
> var target = e.target || e.srcElement;
>
Das auch.
var p = target.parentElement;
var c = p.children;
Variablen sollten ausssagekräftige Bezeichner haben, 50 Zeilen später im Quelltext, weiß niemand man mehr wofür e, c und p eigentlich stehen.
> ~~~javascript
> for ( var i = 0; i < c.length; i++ ) {
>
> var btn = c[ i ];
>
> if ( btn === target ) {
>
> return i;
>
> break;
>
> }
>
> }
>
> }
JavaScript hat eine eingebaute indexOf()-Methode für Arrays, die genau das macht, was du hier mühsam mit der Schleife nachbastelst. Eine NodeList ist leider kein Array, weshalb man einen kleinen Trick anwenden muss, um indexOf() trotzdem verwenden zu können.
Der gesamte Code vereinfacht:
function getElementsIndex ( element ) {
var siblings = element.parent.children;
return [].indexOf.call( siblings, element );
}
Hakuna matata!
Hallo 1UnitedPower!
Kann dir in jedem Punkt nur zustimmen. Bis auf das mit den Variablen, da würde ich sagen kommt es auf den Kontext an. Die hier von mir Verwendeten Kürzel laufen sicherlich nicht Gefahr, 50 Zeilen später nochmal gebraucht zu werden. Insoweit unterscheide ich zwischen Variablen, die "echte" Informationsträger sind, und solchen, die bloß reine "Arbeitsmittel" sind. Grundsätzlich hast du aber natürlich recht. ;)
Was e.srcElement und window.event angeht, fällt es mir schwer, die Relevanz korrekt einzuschätzen, weswegen ich bloß auf Nummer Sicher gehen wollte.
Der gesamte Code vereinfacht:
function getElementsIndex ( element ) {
var siblings = element.parent.children;
return [].indexOf.call( siblings, element );
}
Vielen Dank dafür!
Gruß,
Roadster.
Hakuna matata!
Bon nuit!
function getElementsIndex ( element ) {
var siblings = element.parent.children;
return [].indexOf.call( siblings, element );
}
Vielleicht liegt es an der späten Uhrzeit, - bin nicht mehr voll auf der Höhe -, aber ich glaube, das sollte doch besser heißen:
`var siblings = element.parentElement.children;`{:.language-javascript}
Auch wenn "parent" eigentlich aussagekräftig genug wäre. ;)
Gruß,
Roadster.
Vielleicht liegt es an der späten Uhrzeit, - bin nicht mehr voll auf der Höhe -, aber ich glaube, das sollte doch besser heißen:
var siblings = element.parentElement.children;
Du hast schon recht, mich lässt die späte Uhrzeit auch nicht unbeeinflusst, danke für die Korrektur.
Aber angenommen dieser Radio ist in der 5. Zeile von insgesamt 10 so kann ich die Gesamtanzahl aller Kindelemente zwar anfragen und bekomme dann 10 geliefert aber ich weiss immer noch nicht an welcher Stelle der Radio sitzt der geklickt wurde.
Nur zur Ergänzung: in jQuery gibt's dafür die Methode .index()
https://api.jquery.com/index/
Aber wenn Roadsters Lösungsvorschlag bei dir läuft würd' ich dir diesen empfehlen, da er mit großer Wahrscheinlichkeit performanter sein wird.
Ein weiterer Vorschlag wäre den Radiobuttons eindeutige id's zuweisen, die deren index entsprechen. Dann müsstest du nur die id des geklickten Elementes auslesen und würdest dir den Loop durch alle Kindelemente sparen. So z.B.:
<input id="1" type="radio" name="deinName" value="deinWert">
<input id="2" type="radio" name="deinName" value="deinWert">
<input id="3" type="radio" name="deinName" value="deinWert">
<input id="4" type="radio" name="deinName" value="deinWert">
$(' :radio').click(function(e){
console.log(e.target.id);
console.log(this.id);
// aus e oder this kannst du evtl. alle benötigten Informationen auslesen
// e oder this enthalten das Objekt von dem das Event (click) ausgelöst wurde
});
Ich bin aber wie Mathias Apsel der Meinung, dass du beschreiben solltest was du mit dem auslesen des index genau bezwecken möchtest. Mit großer Wahrscheinlichkeit gibt es nämlich eine Zielführendere Lösung für dein Problem.
Hallo,
das mit dem Zuweisen weiterer ID's hatte ich ganz am Anfang.
das funktionierte einwandfrei.
Man sagte mir jedoch das mein Code so unübersichtlich sei.
Grund:
da ich mit mehreren Formularen bzw. Tabellen arbeite in dne Tabellen jedoch stets die gleichen Eingabefelder sind musste ich mit ID's auf die Zeilen zugreifen
Das Elternelement erhielt dabei id=box-1
ein Kindelement wie der Radio erhielt dann id=radio-1-1 oder radio-1-2 usw
Da ich in den Zeilen Manipulationen durchführen muss bei denen der Radio geklickt wurde klappt das ganz gut.
Dann stellte ich rein auf Kindelemente um die ich zähle
Da ich nun durch das Elternelement und dessen id also box-1 eine Eindeutigkeit habe muss ich nur noch die Kindelemente ermitteln.
Siehe bitte meine letzte Antwort... dort habe ich beschrieben bis wann das Ermitteln von Kindelement geht und wann es nicht mehr sauber funktioniert..
Das mit dem Index hörte ich schon, würde mich genauer interessieren wie das geht.
Ich ermittle ja schon den Radio-uotton der geklickt wurde, das geht auch, aber ich brauche dessen Stelle also die <tr> Zeile damit ich diese dann via jQuery manipulieren kann
Grüße
das funktionierte einwandfrei.
Man sagte mir jedoch das mein Code so unübersichtlich sei.
Das ist er m.M. jetzt schon, durch die verschachtelten Tabellen.
Das mit dem Index hörte ich schon, würde mich genauer interessieren wie das geht.
Ich ermittle ja schon den Radio-uotton der geklickt wurde, das geht auch, aber ich brauche dessen Stelle also die <tr> Zeile damit ich diese dann via jQuery manipulieren kann
Bedeutet das, du brauchst die Zeilennummer nur, um ein Objekt zu erhalten, damit du mit jQuery darauf zugreifen kannst?
Folgender Code liefert dir die Zeilennummer und das Objekt.
$(':radio').click(function(){
var tr = $(this).closest('tr'); // zeilen objekt evtl. tr[0]
var tr_index = tr.index(); // zeilen index
// tests
console.log(tr_index);
console.log(tr[0].id);
});
Beispiel: http://jsfiddle.net/ybmq0k78/
Hakuna matata!
Nur zur Ergänzung: in jQuery gibt's dafür die Methode .index()
https://api.jquery.com/index/Aber wenn Roadsters Lösungsvorschlag bei dir läuft würd' ich dir diesen empfehlen, da er mit großer Wahrscheinlichkeit performanter sein wird.
jQuery benutzt intern die indexOf()-Methode von Arrays. Zumindest in meinem Browser ist die schneller als eine selbstgebaute for-Schleife, aber das scheint wohl für die Mehrheit der Browser noch nicht zu gelten.
So oder so mag ich es nicht, wenn man Performance-Optimierung auf Verdacht betreibt. Erstmal sollte man den schönst möglichen Code schreiben. Wenn es dann tatsächlich zu Performance-Lags kommt, dann sollte man zielgerichtet nach der Ursache suchen und dort Nachbesserungen vornehmen, wo wirklich Bedarf ist.
Ich bin aber wie Mathias Apsel der Meinung, dass du beschreiben solltest was du mit dem auslesen des index genau bezwecken möchtest. Mit großer Wahrscheinlichkeit gibt es nämlich eine Zielführendere Lösung für dein Problem.
ACK.
Gibt es eine Möglichkeit das ich mir das Kindelement ausgeben lasse von der der Klick auf den Radio-Button ausgelöst wurde?
Tu mich schwer deine Fragestellung zu verstehen. Hab' zu wenig Informationen. Ich weiß z.B. nicht, wie dein DOM aussieht, usw...
Aber folgendes könnte ein Ansatz zur Lösung deines Problems sein.
$(' :radio').click(function(e){
console.log(e);
console.log($(this));
// aus e oder this kannst du evtl. alle benötigten Informationen auslesen
// e oder this enthalten das Objekt von dem das Event (click) ausgelöst wurde
});