Eine HTML-Tabelle um Zeilen erweitern und in DB schreiben


Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
#1
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
 
#3
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
 

Sempervivum

Erfahrenes Mitglied
#4
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>.
 
#6
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
 

Sempervivum

Erfahrenes Mitglied
#7
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('');
 
#9
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
 
#11
Das (gedankliche) Puzzelteil, was mir noch fehlte, war, das die Datenzeile über die Array-Number (bzw. den Array-Index) zusammengehalten wird.
Und über den muss ich dann solange iterieren, wie ich Elemente habe (ermittle ich per count(Array) ), und schreibe dann so die Werte per Insert-Into SQL ind die DB.

Vielen Dank, sempervivum, für die richtigen "Hinweise" so dass ich auf die Lösung kommen konnte !!!!

Grüßle
Oliver
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…