Dynamische Tabelle mit Datenbankabfrage!

E

Endanwender

Grünschnabel
Hallo zusammen,

ich kann mir denken, dass dieses Thema bestimmt bereits zahlreich angesprochen wurde, jedoch möchte ich es gerne nochmal aufgreifen und meinen Gegebenheiten anpassen, da ich in anderen Beitragen so richtig keine Lösung gefunden habe (mal wieder so ein langer Satz).

Also mein Problem:

Ich habe folgende Tabelle:
PHP: 
<table width="100%" border="0">
            <tr>
                <th width="15%"><small>Name</small></th>
                <th align="center"><small>Daten</small></th>
                <th align="center"><small>Zeit</small></th>
            </tr>
            <tr>
                <td><select name="Name" />
 <?php   while($row1 = mysql_fetch_array($ergebnis1)) {
                echo "<option>".$row1['Name']."</option>\n";
        }
 ?>
                </td>
                <td><input type="text" name ="pkt1" size="100" /></td>
                <td><input type="text" name ="zeit1" size="2" /></td>
            </tr>
</table>

So jetzt möchte ich einen kleinen Button noch einbauen, dessen Funktion darin besteht die Tabelle um eine Zeile zu erweitern, wobei die Formatierung der 2.ten Zeile übernommen wird. Lediglich soll sich der Name der Inputfelder in der Form ändern, dass in der neuen Zeile dann pkt2 und zeit2 steht! Das ganze sollte dadurch um beliebig viele Zeilen erweitert werden können. Noch als Ergänzung das ganze befindet sich also in einem Formular!

MFG
der Endanwender

Nachtrag: Ach mit das wichtigste hab ich beinahe vergessen! Wie schaut es da noch mit der "select"-Komponente aus. Ich kann ja nicht das Ergebnis des Mysql-querys nochmal abfragen! Ist es vielleicht sinnvoller, das Ergebnis des Querys in einen Array zu packen?
 
Zuletzt bearbeitet:
Hi,

du könntest die zweite Zeile der Tabelle clonen und in den TBODY einhängen.
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS - Tabellenzeile clonen</title>
<meta name="author" content="Quaese" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
  <!--
function addRow(strID){
  // Zweite Tabellenzeile clonen
  var objRowNode = document.getElementById(strID).getElementsByTagName('tr')[1].cloneNode(true);
  // An das Ende des TBODYs einhängen
  document.getElementById(strID).appendChild(objRowNode);

  return false;
}
 //-->
</script>
</head>

<body>

<form method="post" action="versuch.php">
<table width="100%" border="0">
  <tbody id="tbodyID">
    <tr>
      <th width="15%"><small>Name</small></th>
      <th align="center"><small>Daten</small></th>
      <th align="center"><small>Zeit</small></th>
    </tr>
    <tr>
      <td>
        <select name="Name[]" size="1">
          <option value="op1">op1
          <option value="op2">op2
          <option value="op3">op3
        </select>
      </td>
      <td><input type="text" name ="pkt[]" size="100" /></td>
      <td><input type="text" name ="zeit[]" size="2" /></td>
    </tr>
  </tbody>
</table>
<input type="submit" value="submit" />
</form>
<button onclick="return addRow('tbodyID');">Zeile einfügen</button>
</body>
</html>
Die Numerierung wird hier durch das Generieren von Arrays umgangen (eckige Klammern am Ende
der Elementnamen). D.h. im Auswertungsscript (hier: versuch.php) stehen für "Name", "pkt" und
"zeit" Arrays zur Verfügung. Dabei enthält die jeweils erste Komponente die Werte der ersten
Eingabezeile, die zweite Komponente die Werte der zweiten Zeile usw.

Beispiel für Name (pkt und zeit analog):
$_POST['Name'][0] : Name aus erster Eingabezeile
$_POST['Name'][1] : Name aus zweiter Eingabezeile
...

Vielleicht hilft dir das weiter.

Ciao
Quaese
 
Danke für den hilfreichen Tipp! Es funktioniert sehr gut!

Nur ein Frage betreffs Schönheitsaspekt! Wenn ich nun eine Zeile angefügt haben, besteht da die Möglichkeit den Button in der vorhergehenden zeile wieder zu entfernen?

EDIT:

Hat sich erledigt, Lösung gefunden.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück