Eine HTML-Tabelle um Zeilen erweitern und in DB schreiben

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

borgplasma

Grünschnabel
Hallo,
ich bin gerade an einem Projekt, wo ich momentan an meine Grenzen stoße, und keine rechte Idee habe, wie ich dieses realisieren kann:

Ich habe auf einer PHP Seite eine HTML-Tabelle eingebettet, welche in den Zellen Textfelder hat.
Diese Tabelle dient als Formular, um damit eine MySQL-Tabelle zu befüllen.

Was ich habe und was funzt, ist, das diese Tabelle eine Zeile haben kann, und diese speichere ich in die DB-Tabelle.

Nun stehe ich vor der Herausforderung, das ich eine HTML-Tabelle brauche, welche ich
a) mit einen "knopfdruck" (Button) um eine Zeile erweitere (um weitere Datensätze zu erfassen), und
b) ich diese dann mehrere Datensätze dann abschließend in die DB schreiben möchte.

(Ich möchte also nicht einen Datensatz erfassen, speichern, Tabelle leeren und erneut daten erfassen, speichern usw. Ich benötige die Übersicht der bereits erfassten Daten, ob sie vollständig und fehlerfrei sind.)

Ein kleines Beispiel, wie ich die Tabellen bislang realisiert habe (auf zwei Spalten beschränkt, damit der Code nicht zu lang wird):

==========
PHP:
$maxrcid = $db->query("SELECT MAX(register_constellation_id)+1 AS MaxID FROM REGISTER_CONSTELLATION;") or die($db->error);

if ($maxrcid ->num_rows) {
    echo "<p>Daten ausgewählt: ". $maxrcid ->num_rows ." Register-Constellations</p>";

        while($datensatzrcid = $maxrcid->fetch_object()) {
            $datenrcid[] = $datensatzrcid;           
    }
}


<form method="post" action="saveregisterconst.php">
<html>
 <head>
  <meta charset="utf-8">
    <style>
     table {width: 95%;}
      th { background-color: #666; color: #fff; }
      tr { background-color: #fffbf0; color: #000; }
      tr:nth-child(odd) { background-color: #e4ebf2 ; }
      </style>
     </head>
    <body>
   <main>
    <table>
        <thead>
            <tr>
                <th>RegConst. ID</th>
                <th>RegConst. Name</th>
        [...hier noch weitere Spalten...]
            </tr>
        </thead>
        <tbody>
                <tr>
                <?php
                    foreach ($datenrcid as $inhaltrcid) {
                ?>

            <td><input type="text" name="register_constellation_id" value="<?php echo $inhaltrcid->MaxID; ?>" readonly></td>
        <?php
            }
        ?>           
            <td><input type="text" name="register_constellation_name"></td>
        [...hier noch weitere Spalten...]
        </tr>
    </tbody>
    </table>
   </main>
  </body>   
  <p><input type="submit" value="RegConst.Name speichern" name="submit"  /></p>
  </html>
 </form>
<?php

==========

Habe ich irgendwas vergessen zu erwähnen / undeutlich beschrieben?

Ich danke euch für eure Unterstützung !!!!!!

Grüßle
Oliver
 
Hi, vielen Dank auf die Lösung, die würde mir schon passen.

Aber ich stelle mich wahrscheinlich zu dappisch an, es funzt bei mir nicht ganz.
Tabelle, Felder und Button wird aufgebaut, aber beim drücken des Buttons passiert rein garnichts :

Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});

</script>

<table>
    <tr><td>Item Type</td><td>Item</td><td>Add/Remove Item</td></tr>
    <tr><td><input type='text' value='Fruit >'></td><td><input type='text' value='Apple'></td><td><input type='button' class='AddNew' value='Add new item'></td></tr>
</table>

Vielleicht ist das javascript-Zeug nicht richtig eingebunden?

Vielen dank für eure Hilfe,

Oliver
 
jQuery hast Du ja schon eingebunden. Dann ist die Problemursache die folgende: Wenn das Skript abläuft muss die Tabelle schon existieren, d. h. Du musst das Skript nach dem HTML der Tabelle notieren, am besten vor dem schließenden </body>.
 
Super, vielen Dank für den Hinweis, nun klappts auch !! Manchmal sinds die Kleinigkeiten, die einem das leben schwer machen .... :)
 
Hi, ich müsste nochmal nachfragen:
Der Code-Schnippsel funktioniert insofern, als das eine neue Zeile mit leeren Inputfeldern angelegt wird.
Nun habe ich aber ein Feld, welches ich mit einer Zahl vorbelege, welche ich vorher aus der Datenbank ermittelt habe. Dieser Wert wird auch nur angezeigt, ist nicht editierbar.
Jedoch wird durch "AddNew" in der neuen Zeile dieses Feld leer angelegt, ohne den Wert. Wie bekomme ich denn das nun hin, das er auch den Wert mitnimmt?

Hier die Tabelle (ohne den Headerteil) mit der Add/Remove-Funktion:

Code:
<html>
 <head>
  <meta charset="utf-8">
    <style>
     table {width: 95%;}
      th { background-color: #666; color: #fff; }
      tr { background-color: #fffbf0; color: #000; }
      tr:nth-child(odd) { background-color: #e4ebf2 ; }
      </style>
     </head>
    <body>
   <main>
    <table>
        <thead>
[... hier ist der Tabellenheader für die Überschriften...]
        </thead>
        <tbody>
                <tr>
                <?php
                    foreach ($datenrcid as $inhaltrcid) {
                ?>

            <td><input type="text" name="register_constellation_id" value="<?php echo $inhaltrcid->MaxID; ?>" readonly></td>
        <?php
            }
        ?>   
            <td><input type="text" name="register_constellation_name"></td>
                    <td><input type="text" name="classification_register_id"></td>
                    <td><input type="text" name="instruments_id"></td>
                    <td><input type="text" name="singlevoicesheet_id"></td>
                    <td><input type="text" name="tuning_key_id"></td>
                    <td><input type="text" name="maxcountplayers"></td>
                    <td><input type="text" name="player_id"></td>
                    <td><input type="text" name="player_comment"></td>       
                    <td><input type='button' class='AddNew' value='Add new item'></td>
        </tr>
    </tbody>
    </table>
   </main>

<script type="text/javascript">

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});

</script>
    
  </body>   
  <p><input type="submit" value="RegConst.Name speichern" name="submit"  /></p>
  </html>

Vielen Dank für eure Hilfe !!!!
Oliver
 
Das lässt sich relativ einfach machen. Die Zellen werden mit dieser Zeile explizit gelöscht:
row.find('input').val('');
Das betr. Feld hat das Attribut "readonly", so dass es sich leicht vom Löschen ausschließen lässt:
row.find('input').not('[readonly]').val('');
 
Hi,

ich muss mich doch nochmal melden. Ich komme gedanklich nicht weiter, wie ich es konkret umsetzen soll.

Nun funktioniert zwar meine Geschichte mit der erweiterbaren Tabelle.
Jedoch werden im POST nur der letzte Wert (die letzte Zeile der Tabelle) übergeben und in die DB geschrieben.

Ich weiss durch hin- und her googlen, das ich hier mit einem (mehrdimensionalen) Array arbeiten sollte / muss.

Dieses übergebe ich dann im POST an mein DB-schreib-Script, und werte dort das Array mit "foreach()-Schleife" aus (durchlaufe so alle "zeilen" des Arrays und schreibe es nacheinander in die DB.
Das funktioniert in einem Beispiel, soweit sogut

Wo ich nun konkret nicht weiterkomme:
Wie übergebe ich die Werte der Tabelle (die Zeilen) jeweils dem Array (den zeilen des Arrays)?

Hier nochmal mein Code der Tabelle:
PHP:
?>
<form method="post" action="saveregisterconst.php">
<html>
 <head>
  <meta charset="utf-8">
    <style>
     table {width: 95%;}
      th { background-color: #666; color: #fff; }
      tr { background-color: #fffbf0; color: #000; }
      tr:nth-child(odd) { background-color: #e4ebf2 ; }
      </style>
     </head>
    <body>
   <main>
    <table>
        <thead>
            <tr>
                <th>RegConst. ID</th>
                <th>RegConst. Name</th>
                <th>Instrument</th>
                <th>Register Klass.</th>
                <th>Einzelstimmen-Link</th>
                <th>Tonart</th>
                <th>Max.Spieler</th>
                <th>Spieler Name</th>
                <th>Spieler-Zusatz</th>
                <th>Add/Remove</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                <?php
                    foreach ($datenrcid as $inhaltrcid) {
                ?>

            <td><input type="text" name="register_constellation_id" value="<?php echo $inhaltrcid->MaxID; ?>" readonly></td>
        <?php
            }
        ?>   
                    <td><input type="text" name="register_constellation_name"></td>
                    <td><input type="text" name="classification_register_id"></td>
                    <td><input type="text" name="instruments_id"></td>
                    <td><input type="text" name="singlevoicesheet_id"></td>
                    <td><input type="text" name="tuning_key_id"></td>
                    <td><input type="text" name="maxcountplayers"></td>
                    <td><input type="text" name="player_id"></td>
                    <td><input type="text" name="player_comment"></td>       
                    <td><input type='button' class='AddNew' value='Add new item'></td>
        </tr>
    </tbody>
    </table>
   </main>

<script type="text/javascript">

$('.AddNew').click(function(){
   var row = $(this).closest('tr').clone();
   row.find('input').not('[readonly]').val('');
   $(this).closest('tr').after(row);
   $('input[type="button"]', row).removeClass('AddNew').addClass('RemoveRow').val('Remove item');
});

$('table').on('click', '.RemoveRow', function(){
  $(this).closest('tr').remove();
});

</script>
    
  </body>   
  <p><input type="submit" value="RegConst.Name speichern" name="submit"  /></p>
  </html>
 </form>

Vielen Dank für eure Unterstützung,
Oliver
 
Du brauchst den Namen nur eckige Klammern hinzuzufügen, dann wird automatisch ein Array übergeben:
name="register_constellation_name[]"
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück