[Erledigt] per onClick im &amp;lt;tr&amp;gt;-element bestimmte Radiobutton aktivieren

daniel_1998 · 09.12.2011, 19:35

Hi,

folgender Aufbau einer Tabelle. (auf das notwendigste gekürzt)

PHP-Code:

  <script type="text/javascript">

<!--

 
    function selectRadioButton(id)

    {

        //alert(id);

        document.artikel.variante.checked = true;

    } 

-->

</script>

 
 
<form name="artikel">

  <table>

    <tr onclick="selectRadioButton('1339');">

      <td><input type="radio" value="1339" name="variante"></td>

    </tr>

    <tr onclick="selectRadioButton('1340');">

      <td><input type="radio" value="1340" name="variante"></td>

    </tr>

  </table>

</form>

In der Tabelle sind natürlich noch weit aus mehr an <td>-Elemente drin.
Das alert-fenster bekomme ich in der gesamten Zeile.... so wie ich es benötigt.
Die ID wird dabei korrekt übergeben.

Das Problem besteht aber darin, den Radiobutton zu finden.
Soe wie ich es jetzt schon habe (document.artikel.variante) greife ich shcon mal auf die Varianten selbst zu. Aber dieser Befehl müßte alle Varianten betreffen, die aufgeführt sind.
Mittels schleife bin ich an diversen Stellen gescheitert.
Vermutlich brauche ich auch keine, denn ich habe ja die direkte id vom Radiobutton. Nur wie ansprechen ?

nikosch · 09.12.2011, 19:55

Gib dem Button eine ID oder übergib this und traversier Dich durch die Elementstruktur.

daniel_1998 · 09.12.2011, 20:02

Zitat:

Zitat von nikosch

Gib dem Button eine ID [...]

Auf die Idee bin ich zwischenzeitlich dann auch schon gestossen.
Hatte erst gedacht, das ich den Radiobutton per Value-Wert ansprechen könnte.

Aktueller Stand bei: per ID

Code:

document.GetElementById('id').checked = true;

 Fehler: document.GetElementById is not a function

aber da bin ich noch dran.

Zitat:

Zitat von nikosch

[...]oder übergib this und traversier [...]

Dann werd ich mir mal "this" ansehen... und mal nachschlagen, was "traversier" ist. Das Wort selbst kenn ich noch garnicht

nikosch · 09.12.2011, 20:06

Zitat:

Fehler: document.GetElementById is not a function

Funktionsnamen in JS sind case sensitive.

daniel_1998 · 10.12.2011, 00:09

okay. Das die case sensitive sind, war mir neu. Aber eigendlich logisch. Bei PHP ja nicht anders.

Habs nun hinbekommen.

Jetzt brauch ich aber mal n Vorschlag zwecks umsetzung. Aktuell fehlt mir hier eine Idee.

Ich habe eine Tabelle, wo alle Varianten angezeigt werden. Da es meist recht viel sind würde ich das <tr> element gern farblich hinterlegen.

PHP-Code:

      function selectRadioButton(id)

    {       

                 [...]

 
        document.getElementById(id+'-tr-element').style.backgroundColor = "red";

    } 

 
<form name="artikel">

  <table>

    <tr id="1339-tr-element");">

      <td>  [...]  </td>

    </tr>

    <tr id="1340-tr-element");">

      <td>  [...]  </td>

    </tr>

  </table>

</form>

Das ganze klappt soweit, das ich in die Zeile klicken kann und diese wird dann rot hinterlegt. So wie ich es wollte.
Klicke ich aber zusätzlich noch eine andere an, wird diese auch rot, ohne das die andere sich zurück auf weiß färbt.

Da ich hier noch nichts an Befehlen drin habe, ist mir das schon klar, warum das passiert.

Aber wie könnte ich es umsetzen?
Bei einen erneuten Klick in eine andere Zeile verliere ich ja die 'id' vom vorher markierten Element.
Denn das habe ich schon versucht mittels übergabe an einer JS-Variable
(var old_id = id+'-tr-element'

Nach erneuten Klick steht mir diese dann nicht mehr zur Verfügung. Auslagern in die Session empfinde ich als Unsinnig. Muß doch auch einfacher gehen... und alle Elemente in einer for-schleife zu durchlaufen... naja. möglich aber auch nicht grad das gelbe vom Ei.

Habe ich irgendwie die Möglichkeit mit die alte ID "wegzuspeichern" ?

nikosch · 10.12.2011, 00:15

Zitat:

Bei PHP ja nicht anders.

Falsch.

daniel_1998 · 11.12.2011, 10:44

sorry... aber ich komm echt nicht weiter.

Ich würde meine Problem nun mit einer Schleife lösen wollen.
Erfolgt ein klick auf ein <tr> element, müßen dann alle <tr>-elemente durchlaufen werden und entsprechend verarbeitet werden.

Aber es hängt schon an der primitiven Schleife. Obwohl schon mehrfach umgesetzt, fehlt mir das Wissen mit den Umgang von RegExp.

HTML-Tabelle

PHP-Code:

  <form name="artikel">

<table width="100%" cellspacing="2" cellpadding="0" border="1">

<tr>

<tr id="tr-element-0" onclick="selectRadioButton(1339);" style="background-color: white">

<tr id="tr-element-1" onclick="selectRadioButton(1340);" style="background-color: white">

<tr id="tr-element-2" onclick="selectRadioButton(1341);" style="background-color: white">

<tr id="tr-element-3" onclick="selectRadioButton(1342);" style="background-color: white">

<tr id="tr-element-4" onclick="selectRadioButton(1343);" style="background-color: white">

<tr id="tr-element-5" onclick="selectRadioButton(1344);" style="background-color: white">

<tr id="tr-element-6" onclick="selectRadioButton(1345);" style="background-color: white">

<tr id="tr-element-7" onclick="selectRadioButton(1346);" style="background-color: white">

</table>

</form>

Meine Schleife die wegen unwissenden Einsatz von Regulären Ausdrücken nicht klappt.

PHP-Code:

          //alert(document.getElementById('tr-element-[0-9]'));

        for (var i=0, l = document.getElementById('tr-element-'+[0-9]).length; i < l; i++)  

        {

            alert(i);

        }

Bin zwar kein Fan von vorkauen, aber ich such nun schon fast 2 Tage ... vvlt. hat jm. ja ein Tipp für mich, wie ich die gewünschten <tr>-Elemente finden kann

rudygotya · 11.12.2011, 11:40

Wie wärs, wenn du auf ein DOM-Framework zurückgreifst? Macht das alles um ein vielfaches einfacher:
MooTools
jQuery
dojo

Such dir eins raus

Alert zum debuggen ist grützekacka.

daniel_1998 · 11.12.2011, 11:50

Nein. Das kommt garnicht in frage.
Ein fettes Framework einzufügen, nur weil ich beim Klick auf ein Element die Hintergrundsfarbe ändern möchte, wäre aus meiner Sicht mehr als Dumm... bzw. erzeugt mehr Overhead als ein simples JS-Script.

Würde also Lösungsvorschläge ohne Framework bevorzugen.

rudygotya · 11.12.2011, 12:21

Für den extra-Request wurden CDNs erfunden.
onclick-Attribute und Konsorten macht deine Anwendung unnötig kompliziert und schwer wartbar
Bei deiner Art zu entwickeln verlierst du unglaublich viel Zeit für Dinge, die längst abstrahiert wurden
alert-debuggen ist zeitintensiv und ineffektiv
Beschäftige dich mit „this“ + Kontextwechsel in Javascript

Angescribbelt ohne Framework:

Code:

 <table>
   <tr>
     <td class="foo"></td>
     <td class="foo"></td>
   </tr>
 </table>

PHP-Code:

  document.getElementsByClassName( 'foo' ).addEventListener( 'click', function () {
   this.style.backgroundColor = '#fe57a1';
 }, false);

Mit dem IE Fallback musst du dich alleine beschäftigen.

https://developer.mozilla.org/en/DOM...dEventListener

Ich würde erst Dinge ablehnen, wenn ich mich damit ernsthaft beschäftigt hätte. Frameworks als dumm zu bezeichnen, die längst etabliert sind, ist arg engstirnig.

Lesen: http://eloquentjavascript.net/contents.html

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Array Element an bestimmte Stelle verschieben	martl666	PHP Einsteiger	8	21.10.2011 16:32
Fusszeile verschwindet, Leerzeile fehlt	ariane	PHP Einsteiger	4	17.04.2011 18:21
Element erstellen, in Quelltext einfügen und auf dieses zugreifen können	R4v3r	JavaScript, Ajax und mehr	8	18.12.2009 11:33
Radiobutton mit klick auf das Wort aktivieren	bierfest	HTML, Usability und Barrierefreiheit	2	11.09.2009 17:21
[JS/CSS] Element erst onclick sichtbar machn script.aculo.us	StatischeEntladung	HTML, Usability und Barrierefreiheit	1	06.04.2006 18:32
bestimmte Link-Farbe für bestimmtes Element	php_frage	HTML, Usability und Barrierefreiheit	6	22.12.2005 09:13

09.12.2011, 19:35
daniel_1998 Benutzer Registriert seit: 27.11.2011 Beiträge: 64 PHP-Kenntnisse: Anfänger	[Erledigt] per onClick im &amp;lt;tr&amp;gt;-element bestimmte Radiobutton aktivieren Hi, folgender Aufbau einer Tabelle. (auf das notwendigste gekürzt) PHP-Code: <script type="text/javascript"> <!-- function selectRadioButton(id) { //alert(id); document.artikel.variante.checked = true; } --> </script> <form name="artikel"> <table> <tr onclick="selectRadioButton('1339');"> <td><input type="radio" value="1339" name="variante"></td> </tr> <tr onclick="selectRadioButton('1340');"> <td><input type="radio" value="1340" name="variante"></td> </tr> </table> </form> In der Tabelle sind natürlich noch weit aus mehr an <td>-Elemente drin. Das alert-fenster bekomme ich in der gesamten Zeile.... so wie ich es benötigt. Die ID wird dabei korrekt übergeben. Das Problem besteht aber darin, den Radiobutton zu finden. Soe wie ich es jetzt schon habe (document.artikel.variante) greife ich shcon mal auf die Varianten selbst zu. Aber dieser Befehl müßte alle Varianten betreffen, die aufgeführt sind. Mittels schleife bin ich an diversen Stellen gescheitert. Vermutlich brauche ich auch keine, denn ich habe ja die direkte id vom Radiobutton. Nur wie ansprechen ?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

09.12.2011, 19:55
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Gib dem Button eine ID oder übergib this und traversier Dich durch die Elementstruktur. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

10.12.2011, 00:09
daniel_1998 Benutzer Registriert seit: 27.11.2011 Beiträge: 64 PHP-Kenntnisse: Anfänger	okay. Das die case sensitive sind, war mir neu. Aber eigendlich logisch. Bei PHP ja nicht anders. Habs nun hinbekommen. Jetzt brauch ich aber mal n Vorschlag zwecks umsetzung. Aktuell fehlt mir hier eine Idee. Ich habe eine Tabelle, wo alle Varianten angezeigt werden. Da es meist recht viel sind würde ich das <tr> element gern farblich hinterlegen. PHP-Code: `function selectRadioButton(id) { [...] document.getElementById(id+'-tr-element').style.backgroundColor = "red"; } <form name="artikel"> <table> <tr id="1339-tr-element");"> <td> [...] </td> </tr> <tr id="1340-tr-element");"> <td> [...] </td> </tr> </table> </form>` Das ganze klappt soweit, das ich in die Zeile klicken kann und diese wird dann rot hinterlegt. So wie ich es wollte. Klicke ich aber zusätzlich noch eine andere an, wird diese auch rot, ohne das die andere sich zurück auf weiß färbt. Da ich hier noch nichts an Befehlen drin habe, ist mir das schon klar, warum das passiert. Aber wie könnte ich es umsetzen? Bei einen erneuten Klick in eine andere Zeile verliere ich ja die 'id' vom vorher markierten Element. Denn das habe ich schon versucht mittels übergabe an einer JS-Variable (var old_id = id+'-tr-element' Nach erneuten Klick steht mir diese dann nicht mehr zur Verfügung. Auslagern in die Session empfinde ich als Unsinnig. Muß doch auch einfacher gehen... und alle Elemente in einer for-schleife zu durchlaufen... naja. möglich aber auch nicht grad das gelbe vom Ei. Habe ich irgendwie die Möglichkeit mit die alte ID "wegzuspeichern" ?

11.12.2011, 10:44
daniel_1998 Benutzer Registriert seit: 27.11.2011 Beiträge: 64 PHP-Kenntnisse: Anfänger	sorry... aber ich komm echt nicht weiter. Ich würde meine Problem nun mit einer Schleife lösen wollen. Erfolgt ein klick auf ein <tr> element, müßen dann alle <tr>-elemente durchlaufen werden und entsprechend verarbeitet werden. Aber es hängt schon an der primitiven Schleife. Obwohl schon mehrfach umgesetzt, fehlt mir das Wissen mit den Umgang von RegExp. HTML-Tabelle PHP-Code: <form name="artikel"> <table width="100%" cellspacing="2" cellpadding="0" border="1"> <tr> <tr id="tr-element-0" onclick="selectRadioButton(1339);" style="background-color: white"> <tr id="tr-element-1" onclick="selectRadioButton(1340);" style="background-color: white"> <tr id="tr-element-2" onclick="selectRadioButton(1341);" style="background-color: white"> <tr id="tr-element-3" onclick="selectRadioButton(1342);" style="background-color: white"> <tr id="tr-element-4" onclick="selectRadioButton(1343);" style="background-color: white"> <tr id="tr-element-5" onclick="selectRadioButton(1344);" style="background-color: white"> <tr id="tr-element-6" onclick="selectRadioButton(1345);" style="background-color: white"> <tr id="tr-element-7" onclick="selectRadioButton(1346);" style="background-color: white"> </table> </form> Meine Schleife die wegen unwissenden Einsatz von Regulären Ausdrücken nicht klappt. PHP-Code: `//alert(document.getElementById('tr-element-[0-9]')); for (var i=0, l = document.getElementById('tr-element-'+[0-9]).length; i < l; i++) { alert(i); }` Bin zwar kein Fan von vorkauen, aber ich such nun schon fast 2 Tage ... vvlt. hat jm. ja ein Tipp für mich, wie ich die gewünschten <tr>-Elemente finden kann

11.12.2011, 11:40
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Wie wärs, wenn du auf ein DOM-Framework zurückgreifst? Macht das alles um ein vielfaches einfacher: MooTools jQuery dojo Such dir eins raus Alert zum debuggen ist grützekacka. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

11.12.2011, 11:50
daniel_1998 Benutzer Registriert seit: 27.11.2011 Beiträge: 64 PHP-Kenntnisse: Anfänger	Nein. Das kommt garnicht in frage. Ein fettes Framework einzufügen, nur weil ich beim Klick auf ein Element die Hintergrundsfarbe ändern möchte, wäre aus meiner Sicht mehr als Dumm... bzw. erzeugt mehr Overhead als ein simples JS-Script. Würde also Lösungsvorschläge ohne Framework bevorzugen.

11.12.2011, 12:21
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Für den extra-Request wurden CDNs erfunden. onclick-Attribute und Konsorten macht deine Anwendung unnötig kompliziert und schwer wartbar Bei deiner Art zu entwickeln verlierst du unglaublich viel Zeit für Dinge, die längst abstrahiert wurden alert-debuggen ist zeitintensiv und ineffektiv Beschäftige dich mit „this“ + Kontextwechsel in Javascript Angescribbelt ohne Framework: Code: <table> <tr> <td class="foo"></td> <td class="foo"></td> </tr> </table> PHP-Code: `document.getElementsByClassName( 'foo' ).addEventListener( 'click', function () { this.style.backgroundColor = '#fe57a1'; }, false);` Mit dem IE Fallback musst du dich alleine beschäftigen. https://developer.mozilla.org/en/DOM...dEventListener Ich würde erst Dinge ablehnen, wenn ich mich damit ernsthaft beschäftigt hätte. Frameworks als dumm zu bezeichnen, die längst etabliert sind, ist arg engstirnig. Lesen: http://eloquentjavascript.net/contents.html __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog