Insert mehrere Zeilen mit einer Dynamic Tabelle

Oh ja, da habe ich noch etwas vergessen, die Buttons müssen natürlich durch eine Klasse adressiert werden, wenn es mehrere sind:
Code:
                    <a class="add_row btn btn-default pull-right btn-xs">Add Row</a>
                    <button type="submit" class="btn btn-info pull-left btn-xs">speichern</button>
                </div>
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function () {
            $(".add_row").on("click", function () {
                // Dynamic Rows Code
                // Get last row id and set new id
                var tbl = $(this).prev("table");
                var lastid = tbl.data("last-id");
                lastid++;
                tbl.data("last-id", lastid);
                var newtr = tbl.find("tbody tr").eq(0).clone();
                newtr.find("input, textarea").val("");
                newtr.attr("id", "addr" + lastid);
                // add the new row
                tbl.find("tbody").append(newtr);
                newtr.find("button.row-remove").on("click", function () {
                    $(this).closest("tr").remove();
                });
            }).trigger("click");
            // Sortable Code
        });
    </script>
 
Alles klappt bisher super...
Nur die Radiobutton werden jetzt für die Spalten übernommen..
Wie muss ich das Script erweitern ?

Mein Versuch ist leider gescheitert..
Code:
$(document).ready(function () {
            $(".add_row").on("click", function () {
                // Dynamic Rows Code
                // Get last row id and set new id
                var tbl = $(this).prev("table");
                var lastid = tbl.data("last-id");
                lastid++;
                tbl.data("last-id", lastid);
                var newtr = tbl.find("tbody tr").eq(0).clone();
                newtr.find("input, textarea, radio").val("");
                newtr.attr("id", "addr" + lastid);
                // add the new row
                tbl.find("tbody").append(newtr);
                newtr.find("button.row-remove").on("click", function () {
                    $(this).closest("tr").remove();
                });
            }).trigger("click");
            // Sortable Code
        });
 
Nein...
Ich habe mich in Dein Script hineingekniet und war voller Hoffnung, das ich es auch wo anders einsetzten kann..
Es ist eine neue dynamische Tabelle wo ich halt auch Radiobuttons beinhalte.
 
Mein neues Formular..

HTML:
<form action="?fremdsprache" method="post">
        <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
            <div class="panel panel-success">
                <div class="panel-heading">
                    <div class="row">
                        <h4 class="text-center pull-left">Bewerten Sie Ihre Fremdsprache</h4>
                    </div>
                </div>
                    <table class="table table-bordered table-hover table-sortable" id="tab_logic" data-last-id="0">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    Sprache
                                </th>
                                <th class="text-center">
                                    Verstehen
                                </th>
                                <th class="text-center">
                                    Sprechen
                                </th>
                                <th class="text-center">
                                    Schreiben
                                </th>
                                <th class="text-center">
                                    Lesen
                                </th>
                                <th colspan="2" class="text-center">
                                    Bemerkung
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0' data-id="0">
                                <td data-name="sprache_name">
                                    <input type="text" name="sprachproben_bewertung_sprache[]" class="form-control inputfeld" placeholder="z.B. Englisch" style="font-size:12px;" />  
                                </td>
                                <td data-name="sprache_verstehen">
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: sehr gut">
                                        sehr gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: gut">
                                        gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: befriedigend">
                                        befriedigend
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_verstehen[]" value="Sprache verstehen: ausreichend">
                                        ausreichend
                                      </label>
                                    </div>
                                </td>
                                <td data-name="sprache_sprechen">
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: sehr gut">
                                        sehr gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: gut">
                                        gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: befriedigend">
                                        befriedigend
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_sprechen[]" value="Sprache sprechen: ausreichend">
                                        ausreichend
                                      </label>
                                    </div>
                                </td>
                                <td data-name="sprache_schreiben">
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: sehr gut">
                                        sehr gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: gut">
                                        gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: befriedigend">
                                        befriedigend
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_schreiben[]" value="Sprache schreiben: ausreichend">
                                        ausreichend
                                      </label>
                                    </div>
                                </td>
                                <td data-name="sprache_lesen">
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: sehr gut">
                                        sehr gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: gut">
                                        gut
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: befriedigend">
                                        befriedigend
                                      </label>
                                    </div>
                                    <div class="radio">
                                      <label>
                                        <input type="radio" name="sprachproben_bewertung_lesen[]" value="Sprache lesen: ausreichend">
                                        ausreichend
                                      </label>
                                    </div>
                                </td>
                                <td data-name="sprache_bemerkung">
                                    <textarea name="sprachproben_bewertung_bemerkung[]" class="form-control inputfeld"></textarea>
                                </td>
                                <td data-name="del">
                                    <button class="btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen"></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <a class="add_row btn btn-success pull-right btn-xs" style="margin-top:7px;">Weitere Fremdsprache bewerten</a>
                    <button type="submit" class="btn btn-info btn-xs" style="float:left; margin-top:7px;">Bewertung der Fremdsprache/n speichern</button>
                    <div class="panel-footer">
                    </div>
              </div>
    </form>



Das INSERT....

PHP:
if(isset($_GET['fremdsprache'])) {
     $error = false;
     $userid = $_POST['userid'];
     for ($i = 0; $i < count($_POST['sprachproben_bewertung_sprache']); $i++) {
          $sprachproben_bewertung_sprache = $_POST['sprachproben_bewertung_sprache'][$i];
          $sprachproben_bewertung_verstehen = $_POST['sprachproben_bewertung_verstehen'][$i];
          $sprachproben_bewertung_sprechen = $_POST['sprachproben_bewertung_sprechen'][$i];
          $sprachproben_bewertung_schreiben = $_POST['sprachproben_bewertung_schreiben'][$i];
          $sprachproben_bewertung_lesen = $_POST['sprachproben_bewertung_lesen'][$i];
          $sprachproben_bewertung_bemerkung = $_POST['sprachproben_bewertung_bemerkung'][$i];
         
          $statement = $pdo->prepare("INSERT INTO users_sprachproben_bewertung (userid,sprachproben_bewertung_sprache,sprachproben_bewertung_verstehen,sprachproben_bewertung_sprechen,sprachproben_bewertung_schreiben,sprachproben_bewertung_lesen,sprachproben_bewertung_bemerkung) VALUES (:userid,:sprachproben_bewertung_sprache,:sprachproben_bewertung_verstehen,:sprachproben_bewertung_sprechen,:sprachproben_bewertung_schreiben,:sprachproben_bewertung_lesen,:sprachproben_bewertung_bemerkung)");
          $statement->execute(array('userid' => $userid, 'sprachproben_bewertung_sprache' => $sprachproben_bewertung_sprache, 'sprachproben_bewertung_verstehen' => $sprachproben_bewertung_verstehen, 'sprachproben_bewertung_sprechen' => $sprachproben_bewertung_sprechen, 'sprachproben_bewertung_schreiben' => $sprachproben_bewertung_schreiben, 'sprachproben_bewertung_lesen' => $sprachproben_bewertung_lesen, 'sprachproben_bewertung_bemerkung' => $sprachproben_bewertung_bemerkung));
      }
    }
 
Na, das war mal eine harte Nuss: jQuery nimmt beim Klonen das value-Attribut nicht mit. Ich musste es selbst kopieren. Diese Testseite funktioniert:
Code:
<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-3.2.1.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
    <form action="testpost.php" method="post">
        <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
        <div class="panel panel-success">
            <div class="panel-heading">
                <div class="row">
                    <h4 class="text-center pull-left">Bewerten Sie Ihre Fremdsprache</h4>
                </div>
            </div>
            <table class="table table-bordered table-hover table-sortable" id="tab_logic" data-last-id="0">
                <thead>
                    <tr>
                        <th class="text-center">
                            Sprache
                        </th>
                        <th class="text-center">
                            Verstehen
                        </th>
                        <th class="text-center">
                            Sprechen
                        </th>
                        <th class="text-center">
                            Schreiben
                        </th>
                        <th class="text-center">
                            Lesen
                        </th>
                        <th colspan="2" class="text-center">
                            Bemerkung
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0' data-id="0">
                        <td data-name="sprache_name">
                            <input type="text" name="sprachproben_bewertung_sprache[]" class="form-control inputfeld" placeholder="z.B. Englisch" style="font-size:12px;" />
                        </td>
                        <td data-name="sprache_verstehen">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: sehr gut">
                                    sehr gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: gut">
                                    gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: befriedigend">
                                    befriedigend
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_verstehen[0]" value="Sprache verstehen: ausreichend">
                                    ausreichend
                                </label>
                            </div>
                        </td>
                        <td data-name="sprache_sprechen">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: sehr gut">
                                    sehr gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: gut">
                                    gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: befriedigend">
                                    befriedigend
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_sprechen[0]" value="Sprache sprechen: ausreichend">
                                    ausreichend
                                </label>
                            </div>
                        </td>
                        <td data-name="sprache_schreiben">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: sehr gut">
                                    sehr gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: gut">
                                    gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: befriedigend">
                                    befriedigend
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_schreiben[0]" value="Sprache schreiben: ausreichend">
                                    ausreichend
                                </label>
                            </div>
                        </td>
                        <td data-name="sprache_lesen">
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: sehr gut">
                                    sehr gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: gut">
                                    gut
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: befriedigend">
                                    befriedigend
                                </label>
                            </div>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="sprachproben_bewertung_lesen[0]" value="Sprache lesen: ausreichend">
                                    ausreichend
                                </label>
                            </div>
                        </td>
                        <td data-name="sprache_bemerkung">
                            <textarea name="sprachproben_bewertung_bemerkung[]" class="form-control inputfeld"></textarea>
                        </td>
                        <td data-name="del">
                            <button class="btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen"></button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <a class="add_row btn btn-success pull-right btn-xs" style="margin-top:7px;">Weitere Fremdsprache bewerten</a>
            <button type="submit" class="btn btn-info btn-xs" style="float:left; margin-top:7px;">Bewertung der Fremdsprache/n speichern</button>
            <div class="panel-footer">
            </div>
        </div>
    </form>
    <script>
        $(document).ready(function () {
            $(".add_row").on("click", function () {
                // Get last row id and set new id
                var tbl = $(this).prev("table");
                var vals = [];
                var firstrow = tbl.find("tbody tr").eq(0);
                firstrow.find("input[type='radio']").each(function () {
                    vals.push($(this).val());
                });
                var lastid = tbl.data("last-id");
                lastid++;
                tbl.data("last-id", lastid);
                var newtr = tbl.find("tbody tr").eq(0).clone(true, true);
                newtr.find("input, textarea").val("");
                newtr.find("input[type='radio']").each(function (idx, ele) {
                    name = $(this).attr("name").replace("[0]", "[" + lastid + "]");
                    $(this).attr("name", name);
                    $(this).val(vals[idx]);
                });
                newtr.attr("id", "addr" + lastid);
                // add the new row
                tbl.find("tbody").append(newtr);
                newtr.find("button.row-remove").on("click", function () {
                    $(this).closest("tr").remove();
                });
            }).trigger("click");
            // Sortable Code
            var fixHelperModified = function (e, tr) {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function (index) {
                    $(this).width($originals.eq(index).width())
                });
                return $helper;
            };
            $(".table-sortable tbody").sortable({
                helper: fixHelperModified
            });
            $(".table-sortable thead").disableSelection();
        });
    </script>
</body>
</html>
Unter "action" habe ich mein Testskript eingetragen, das musst Du wieder umändern.
 
Super.. Vielen Dank für Deine Geduld und vor allem Deiner top Arbeit..
Es funktioniert einwandfrei... FREU..

Darf ich Dich noch um ein für Dich kleines Problem Nerven ?
 

Neue Beiträge

Zurück