Dynamische Tabelle mittels Checkbox

B

bennot

Mitglied
Hallo,

ich habe bereits folgendes realisiert:

Werte bei denen Checkbox ausgewählt ist werden summiert als Total ausgeben.



Jetzt möchte ich, dass der Name der jeweiligen Option (zu der die Checkbox gehört) in einer Tabelle ausgeben wird.


Also Click Checkbox1 -> Wert addiert als Summe Total + Name der zu Checkbox1 in einer Tabelle + Ausgabe des Wertes der addiert wurde


Summe Total: 1234 (Anfangswert 1000 + 234 von Checkbox1) <- funktioniert

Name: hier Name, wenn Checkbox 1 geklickt wurde | Wert: Wert aus Checkbox1, wenn geklickt


^^ hat jemand ein Tutorial für mich oder kann ein Beispiel posten?

Vielen Dank

Das soll natürlich für n- Checkbox funktionieren.

Also irgend wie als Schleife. Die Tabelle Name: + Wert: erweitert sich dann jeweils um eine Zeile
 
So in der Art vielleicht:


Javascript: 
<script language="javascript" type="text/javascript">
function berechnen() {
erg = 0;
formel = "";

	for (a = 1; a <= 5; a++) {
		if (document.getElementsByName("check" + a)[0].checked == true) {
			erg = erg + parseFloat(document.getElementsByName("check" + a)[0].value);
			formel = formel + document.getElementsByName("check" + a)[0].name + " ";
		}
	}
	document.getElementById("box").innerHTML = formel;
	document.getElementById("summe").innerHTML = erg;
}
</script>
<input type="checkbox" name="check1" value="1" onclick="berechnen();" />
<br />
<input type="checkbox" name="check2" value="2" onclick="berechnen();" />
<br />
<input type="checkbox" name="check3" value="3" onclick="berechnen();" />
<br />
<input type="checkbox" name="check4" value="4" onclick="berechnen();" />
<br />
<input type="checkbox" name="check5" value="5" onclick="berechnen();" />
<br />
Berechnet wurden : <div id="box"></div>
Ergebnis : <div id="summe"></div>
 
danke für die Antwort. Bin jetzt erst zum weitermachen gekommen. ich geb feedback wie ich es mit deiner hilfe lösen konnte

Hat super funktioniert. Hänge aber immer noch an einem Problem:

hier mein Code:

Javascript: 
function angebotBerechnen() {
		document.listForm.total.value = '';
		formel = "";

		var sum =  <?php echo $angebotpreis; ?>;
		for (i=0;i<document.listForm.choice.length;i++) {
		  if (document.listForm.choice[i].checked) {
		  	sum = sum + parseInt(document.listForm.choice[i].value);
   formel = formel + document.listForm.choice[i].id + " " + document.listForm.choice[i].value;
		  }
		}
		document.listForm.total.value = sum;
//		 document.getElementById("box").innerHTML = formel;
		 document.listForm.optionen.value = formel;

	}
- sämtliche Daten wie Zahlen und Texte werden via php aus Textdateien gelesen (das soll halt so sein)
- diese Daten werden mit den Checkboxen "verarbeitet"addiert.
- das Ergebnis aus der CheckboxAuswahl soll jetzt mit Post übergeben werden

Funktioniert super bei Preis Total:
document.listForm.total.value = sum;
^^ hier übergebe ich einfach das Inputfeld total

Problem bei der Bezeichnung (Probleme zu Beginn des Threads):
document.getElementById("box").innerHTML = formel;
^^ gibt mir meine Checkboxauswahl in einem container zurück
-> diesen bekomme ich jedoch nicht mit Post übertragen :(


document.listForm.optionen.value = formel;
^^ hier übergebe ich wieder alles ab ein Inputfeld und kann dieses auch übergeben
-> jedoch fehlt hier sämtliche Formatierung, es wird alles aneinander gereiht



Zusammengefasst:
Ich möchte den Wert (Text) der ausgewählten Checkbox, wenn möglich in einer dynamisch generierten Tabelle ausgeben lassen UND diese dann mittels php über Post übergeben lassen.


- kann ich mit php und Post überhaupt was anderes als Formularteile übergeben?
- gibt es vielleicht ein anderen Weg die Aufgabe zu lösen?
ich bin noch ein Grünschnabel und lerne mit diesem Projekt. Kann auch sein das ich falsch an die Probleme ran gehe.

Über Denkanstöße würde ich mich freuen.

Gruß
 
Zuletzt bearbeitet von einem Moderator:
Also als erstes würde ich dich bitten deinen obigen Bitrag nochmal zu bearbeiten und den Code so zu formatieren das man ihn lesen kann (siehe mein Beispiel).

Dein Problem mit der "formel" bzw. dem Inhalt der Variablen kannst du lösen indem du den Wert entweder in ein verstecktes Textfeld zusätzlich einträgst oder du trägst es in ein sichtbares Textfeld ein welches schreibgeschützt ist.

Was du mit "document.listForm.optionen.value = formel ..." meinst verstehe ich nicht.

Erkläre vielleicht dein ganzes Vorhaben nochmal ein bisschen genauer, dann findet sich sicher eine Lösung dafür.
 
Code: 
document.listForm.optionen.value = formel;


^ ^ das Ergebnis aus formel wird in einem Textfield namens option gespeichert (bzw angezeigt)
Code: 
(formel = formel + document.listForm.choice[i].id + " " + document.listForm.choice.value ; )


nach 2 stündiger Recherche weiß ich nun:

document.write -> erstellt Tabellen nur beim erzeugen

Abhilfe schaft DOM

Trotzdem bekomme ich nach zahlreichen Versuchen zu keinem Ergebnis :(

- mein Dokument soll eine leere Tabelle haben (bsw auf Wunsch diese erzeugen)
- mittels Checkbox select sollen die Werte der Checkbox in einer neue Tabellenzeile geschrieben werden

1) leere / nicht vorhandene Tabelle
2) select Checkbox 1
3) schreibt Zeile 1 mit Wert aus Checkbox 1
4) select Checkbox 2
5) schreibt Zeile 2 mit Wert aus Checkbox 2
usw

Hat Jemand bitte noch ein gutes Tutorial oder Beispielcode?

In der Suche und Google finde ich nichts geeignetes bzw durch Unkenntnis nicht mit dem ich arbeiten kann.

Vielen Dank
 
Zuletzt bearbeitet von einem Moderator:
Ich hätte da erst noch eine generelle Frage. Ganz oben hast du geschrieben: "Das soll natürlich für n- Checkbox funktionieren."

Ist damit jetzt wirklich eine unbestimmte Anzahl gemeint oder gibt es eine feste Zahl Checkboxen, Tabellenzeilen o.ä.?

So ich gleich nochmal.

Schau dir mal auf dieser Seite vor allem die Methoden insertRow und deleteRow.

Damit kannst du Zeilen in eine bestehende Tabelle einfügen bzw. wieder löschen.

Die Frage ist ob es in deinem Fall aber nicht einfacher wäre einfach die komplette Tabelle zu löschen und neu zu erstellen.
 
HTML: 
<form name="listForm" method="post" action="" >
<input type="checkbox" name="choice" id="<?php echo $optiontitel_1; ?>" value="<?php echo $option_1; ?>" onchange="checkTotal()"/>
<input type="checkbox" name="choice" id="<?php echo $optiontitel_2; ?>" value="<?php echo $option_2; ?>" onchange="checkTotal()"/>
 </form>
.


---------------------------------------------------------------

Javascript: 
<script type="text/javascript">
	function checkTotal() {
		document.listForm.total.value = '';
		formel = "";

var table=document.getElementById("test");
var row=table.insertRow(0);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);

		var sum =  <?php echo $angebotpreis; ?>;
		for (i=0;i<document.listForm.choice.length;i++) {
		  if (document.listForm.choice[i].checked) {
		  	sum = sum + parseInt(document.listForm.choice[i].value);

   
    cell1.innerHTML= document.listForm.choice[i].id;
	cell2.innerHTML= document.listForm.choice[i].value;
   
		  }
		}
		document.listForm.total.value = sum;
		
	}
</script>

---------------------------------------------------------------

HTML: 
   <table id="test" width="98%" border="1">
    <tbody>
        ....
    </tbody>
    </table>

---------------------------------------------------------------

Das ganze funktioniert momentan folgend:
- sämtliche Daten werden mit php aus n-Textdateien geholt
- n-Checkbox klick -> Wert addiert zu Summe
- id + value (beide bekommen inhalt aus php read textdatei) werden in einer Tabelle ausgegeben


ToDo (1)
beim deaktivieren der Chekbox, soll genau die Tabellenzeile gelöscht werden, die angelegt wurde

meine Lösungsidee:
for checkbox[i] = unchecked -> deleteRow(index) oder deleteRow(byID)

Also muss ich der angelegten Tabellenzeile noch irgendeinen Index oder ID mit geben.

Geht so was?


ToDo (2)
die Inhalte der Tabellenzeile sollen mittels Post an ein anderes Dokument übergeben werden

meine Lösungsidee:
für n-Checkbox id + value in ein unsichtbares Textfield schreiben und das dann übergeben





Ich komme meinem Ziel immer näher. Am Ende poste ich dann das gesamte Projekt .

Danke für weiteres Feedback. Vor allem zu den neuen ToDo's.
 
Zuletzt bearbeitet:
Sorry aber bei den Farben tun einem ja die Augen weh. Schau dir mal diese Seite hier an, da steht geschrieben wie man seine Beiträge richtig formatiert.

Wenn du das gemacht hast, schau ich gerne nochmal drauf. So wie es jetzt ist, das geht gar nicht!

Ansonsten wäre es meiner Meinung nach am einfachsten wenn du bei jeder Änderung nicht einzelne Zeilen löscht oder hinzufügst, sondern einfach die komplette Tabelle neu aufbaust!
 
tombe hat gesagt.:
Sorry aber bei den Farben tun einem ja die Augen weh. Schau dir mal diese Seite hier an, da steht geschrieben wie man seine Beiträge richtig formatiert.

Wenn du das gemacht hast, schau ich gerne nochmal drauf. So wie es jetzt ist, das geht gar nicht!

Ansonsten wäre es meiner Meinung nach am einfachsten wenn du bei jeder Änderung nicht einzelne Zeilen löscht oder hinzufügst, sondern einfach die komplette Tabelle neu aufbaust!
Zum Vergrößern anklicken....


mit dem kompletten generieren der Tabelle klingt nach einer guten Idee.

Würde das so funktionieren?
Code: 
- if Tabelle X = exist -> lösche sie
- for Checkbox[i] = checked -> schreibe ID[i] + VALUE[i] in eine Tabellenzeile
- Erzeuge Tabelle X

das ganze rufe ich dann im bisherigen JS auf. Dh. jedes mal wenn eine Checkbox geändert wird erzeugt sich die Tabelle neu.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück