HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Tabellezeile hinzufügen

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Tabellezeile hinzufügen

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
timpanse



Anmeldungsdatum: 23.08.2010
Beiträge: 3

BeitragVerfasst am: 23.08.2010 12:25:54    Titel: Tabellezeile hinzufägen Antworten mit Zitat

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 Wink
Nach oben
Benutzer-Profile anzeigen Private Nachricht senden
timpanse



Anmeldungsdatum: 23.08.2010
Beiträge: 3

BeitragVerfasst am: 23.08.2010 15:26:41    Titel: Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
timpanse



Anmeldungsdatum: 23.08.2010
Beiträge: 3

BeitragVerfasst am: 23.08.2010 17:09:03    Titel: Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Dick



Anmeldungsdatum: 01.09.2010
Beiträge: 1

BeitragVerfasst am: 01.09.2010 17:56:01    Titel: Daten aus Textfeldern Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   JavaScript
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
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.