Vorheriges Thema: Nächstes Thema: |
Autor |
Nachricht |
timpanse
Anmeldungsdatum: 23.08.2010 Beiträge: 3
|
Verfasst am: 23.08.2010 12:25:54 Titel: Tabellezeile hinzufägen |
|
|
Huhu,
nun schon seid mehreren Tagen hänge ich fest an dieser Funktion. Ich bin mit Javascript nicht sehr vertraut, deswegen bitte ich um eure Hilfe.
Ich möchte in eine Tabelle per Klick eine neue Zeile hinzufügen, die Formularfelder enthalten soll. Das ganze klappt soweit auch, nur gibt es noch 3 Dinge, die ich nicht hinbekomme.
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function tester(x)
{
var tabelle = document.getElementById('dok')
.getElementsByTagName('tbody')[0];
for (var i = 0; i < x; i++)
{
var menge = document.createElement('input');
menge.setAttribute("type", "text");
menge.setAttribute("name", "menge"+[i]);
menge.setAttribute("value", "menge"+[i]);
menge.setAttribute("size", "5");
menge.setAttribute("class", "textfeld");
var einheit = document.createElement('input');
einheit.setAttribute("type", "text");
einheit.setAttribute("name", "einheit"+[i]);
einheit.setAttribute("value", "einheit"+[i]);
einheit.setAttribute("size", "5");
einheit.setAttribute("class", "textfeld");
var ep = document.createElement('input');
ep.setAttribute("type", "text");
ep.setAttribute("name", "ep"+[i]);
ep.setAttribute("value", "ep"+[i]);
ep.setAttribute("size", "10");
ep.setAttribute("class", "textfeld");
var kurztext = document.createElement('textarea');
kurztext.setAttribute("name", "kurztext"+[i]);
kurztext.setAttribute("class", "textfeld");
var tr = tabelle.insertRow(0);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
var td = tr.insertCell(0);
td.appendChild(ep);
var td = tr.insertCell(0);
td.appendChild(kurztext);
var td = tr.insertCell(0);
td.appendChild(menge);
td.appendChild(einheit);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
}
}
//]]>
</script>
</head>
<body>
<form id="dok" action="auswertung.php">
<img src="add.jpg" onClick="javascript:tester(1);"></img>
<table border="1">
<tr><td>leer</td><td>Menge/Einheit</td><td>Kurztext</td><td>EP</td><td>leer</td><td>leer</td></tr>
<tbody>
</tbody>
<tr><td>leer</td><td>leer</td><td>leer</td><td>leer</td><td>leer</td><td>leer</td></tr>
</table>
<input type=submit value=abschicken>
</form>
</body>
</html>
|
1. Die Zeile soll genau zwischen <tbody> und </tbody> eingefügt werden.
2. Die Formularfelder sollen nummeriert werden mittels variable "i". Also jedes neue Feld soll heißen z.B. einheit0, einheit1, einheit2, usw. damit man die auch später mit php ansprechen kann.
3. Wie kann man zuletzt eingefügte Zeile per klick wieder entfernen? Also ein Button mit "1 Zeile hinzufügen" aber auch einen mit "1 Zeile entfernen".
Im Prinzip kann das alles nur ne Kleinigkeit sein. Hat jemand ne kurze Beschreibung für mich, wie ich das umsetzen kann?
Vielen Dank im vorraus |
|
Nach oben |
|
|
timpanse
Anmeldungsdatum: 23.08.2010 Beiträge: 3
|
Verfasst am: 23.08.2010 15:26:41 Titel: |
|
|
ok Frage 2 konnte ich mir gerade selbst beantworten.
Code: |
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
var wert = 1;
function tester()
{
var tabelle = document.getElementById('dok')
.getElementsByTagName('tbody')[0];
if (wert == 10)
{
return;
}
else
{
var menge = document.createElement('input');
menge.setAttribute("type", "text");
menge.setAttribute("name", "menge"+[wert]);
menge.setAttribute("value", "menge"+[wert]);
menge.setAttribute("size", "5");
menge.setAttribute("class", "textfeld");
var einheit = document.createElement('input');
einheit.setAttribute("type", "text");
einheit.setAttribute("name", "einheit"+[wert]);
einheit.setAttribute("value", "einheit"+[wert]);
einheit.setAttribute("size", "5");
einheit.setAttribute("class", "textfeld");
var ep = document.createElement('input');
ep.setAttribute("type", "text");
ep.setAttribute("name", "ep"+[wert]);
ep.setAttribute("value", "ep"+[wert]);
ep.setAttribute("size", "10");
ep.setAttribute("class", "textfeld");
var kurztext = document.createElement('textarea');
kurztext.setAttribute("name", "kurztext"+[wert]);
kurztext.setAttribute("class", "textfeld");
var tr = tabelle.insertRow(0);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
var td = tr.insertCell(0);
td.appendChild(ep);
var td = tr.insertCell(0);
td.appendChild(kurztext);
var td = tr.insertCell(0);
td.appendChild(menge);
td.appendChild(einheit);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
wert++;
}
}
//]]>
</script>
</head>
<body>
<form id="dok" action="auswertung.php">
<img src="add.jpg" onClick="javascript:tester();"></img><img src="add.jpg" onClick="javascript:tester(exp-1);"></img>
<table border="1">
<tr><td>leer</td><td>Menge/Einheit</td><td>Kurztext</td><td>EP</td><td>leer</td><td>leer</td></tr>
<tbody>
</tbody>
<tr><td>leer</td><td>leer</td><td>leer</td><td>leer</td><td>leer</td><td>leer</td></tr>
</table>
<input type=submit value=abschicken>
</form>
</body>
</html>
|
Nun sollte die Zeile nur noch zwischen den <tbody> erscheinen und wie kann ich auf Klick wieder eine Zeile wegnehmen? |
|
Nach oben |
|
|
timpanse
Anmeldungsdatum: 23.08.2010 Beiträge: 3
|
Verfasst am: 23.08.2010 17:09:03 Titel: |
|
|
Problem gelöst!
Ich poste hier mal den fertigen Code, für alle die die ähnliche Probleme haben oder sowas ähnliches umsetzen wollen.
Code: |
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
var wert = 1;
function addRow()
{
var tabelle = document.getElementById('dok')
.getElementsByTagName('tbody')[0];
if (wert == 10)
{
return;
}
else
{
var menge = document.createElement('input');
menge.setAttribute("type", "text");
menge.setAttribute("name", "menge"+[wert]);
menge.setAttribute("value", "menge"+[wert]);
menge.setAttribute("size", "5");
menge.setAttribute("class", "textfeld");
var einheit = document.createElement('input');
einheit.setAttribute("type", "text");
einheit.setAttribute("name", "einheit"+[wert]);
einheit.setAttribute("value", "einheit"+[wert]);
einheit.setAttribute("size", "5");
einheit.setAttribute("class", "textfeld");
var ep = document.createElement('input');
ep.setAttribute("type", "text");
ep.setAttribute("name", "ep"+[wert]);
ep.setAttribute("value", "ep"+[wert]);
ep.setAttribute("size", "10");
ep.setAttribute("class", "textfeld");
var kurztext = document.createElement('textarea');
kurztext.setAttribute("name", "kurztext"+[wert]);
kurztext.setAttribute("class", "textfeld");
var tr = tabelle.insertRow(tabelle.rows.length);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
var td = tr.insertCell(0);
td.appendChild(ep);
var td = tr.insertCell(0);
td.appendChild(kurztext);
var td = tr.insertCell(0);
td.appendChild(menge);
td.appendChild(einheit);
var td = tr.insertCell(0);
td.appendChild(document.createTextNode('leer'));
wert++;
}
}
function removeRow(){
var objTable = document.getElementById('dok').getElementsByTagName('tbody')[0];
if(objTable.rows.length > 1){
objTable.deleteRow(objTable.rows.length-1);
wert--;
}
}
//]]>
</script>
</head>
<body>
<form id="dok" action="auswertung.php">
<img src="add.jpg" onClick="javascript:addRow();"></img><img src="add.jpg" onClick="javascript:removeRow();"></img>
<table border="1">
<tr><td>leer</td><td>Menge/Einheit</td><td>Kurztext</td><td>EP</td><td>leer</td><td>leer</td></tr>
<tbody>
</tbody>
<tr><td>leer</td><td>leer</td><td>leer</td><td>leer</td><td>leer</td><td>leer</td></tr>
</table>
<input type=submit value=abschicken>
</form>
</body>
</html>
|
|
|
Nach oben |
|
|
Dick
Anmeldungsdatum: 01.09.2010 Beiträge: 1
|
Verfasst am: 01.09.2010 17:56:01 Titel: Daten aus Textfeldern |
|
|
Bin ganz neu hier...
Also erstma an alle: Schönen guten Abend...
Toller Tabelleneditor!!!Kann ich super gebrauchen.
Aber wie sende ich jetzt die Daten aus den Javascript Textfeldern an meine Php Datei?
Würde alles am liebsten in ein 2 dimensionales array einlesen, damit ich es leicht auf der php datei wieder auslesen kann.
MFG
Dick |
|
Nach oben |
|
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst deine Beiträge in diesem Forum nicht bearbeiten. Du kannst deine Beiträge in diesem Forum nicht löschen. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
|