✔ Insert mehrere Zeilen mit einer Dynamic Tabelle

CreativPur · 11. August 2017

Kann mann eigentlich auch nur eine leere Zeile klonen, ohne Inhalt ?
Ich meine, wenn ich die erste Zeile ausfülle und klone dann, erscheint in der zweiten Zeile die Eingabe der ersten Zeile. Das ist natürlich nicht so schön..

Sempervivum · 11. August 2017

Klonen nicht, aber man kann die Inputs in der geklonten Zeile löschen:

Code:

            $("#add_row").on("click", function () {
                // Dynamic Rows Code
                // Get last row id and set new id
                var lastid = $("#tab_logic").data("last-id");
                lastid++;
                $("#tab_logic").data("last-id", lastid);
                var newtr = $("#tab_logic tbody tr").eq(0).clone();
                newtr.find("input").val(""); // dieses wurde eingefügt
                newtr.attr("id", "addr" + lastid);
                // add the new row
                $("#tab_logic tbody").append(newtr);
                newtr.find("button.row-remove").on("click", function () {
                    $(this).closest("tr").remove();
                });
            });

CreativPur · 11. August 2017

Mit den Value´s klappt es, aber wie sieht es mit dem textarea aus ?
Da wird es noch übernommen

Sempervivum · 11. August 2017

Oh, die hatte ich übersehen. Man braucht sie nur zum Selektor hinzu zu fügen:

Code:

                newtr.find("input, textarea").val("");

CreativPur · 11. August 2017

newtr.find("textarea").val("");

Sempervivum · 11. August 2017

Ja, so geht's auch.

CreativPur · 11. August 2017

Danke... Habe es zur gleichen Zeit hin bekommen... smile

CreativPur · 11. August 2017

Shit... Leider habe ich noch ein Problem..
Ich habe auf dieser Seite noch weitere Dynamische Tabellen, welche ich natürlich namentlich auseinander halten muss..
Beruflicher Werdegang, berufliche Weiterbildung, Ausbildung usw..

Ich habe jeder Tabelle und passend im Script einen anderen Namen gegeben, leider klont nur die erste Tabelle..

HTML:

    <form action="?lebenslauf_werdegang" method="post">
    <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Beruflicher Werdegang:</h3>
              </div>
              <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-md-12 table-responsive">
                        <table class="table table-bordered table-hover table-sortable_werdegang" id="tab_logic_werdegang" data-last-id="0">
                            <thead>
                                <tr>
                                    <th class="text-center" width="9%">
                                        von
                                    </th>
                                    <th class="text-center" width="9%">
                                        bis
                                    </th>
                                    <th class="text-center" width="20%">
                                        Beschäftigt als..
                                    </th>
                                    <th class="text-center" width="22%">
                                        Bei der Firma/Einrichtung
                                    </th>
                                    <th class="text-center" width="13%">
                                        Ort
                                    </th>
                                    <th colspan="1" class="text-center">
                                        Bemerkung
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id='werdegang' data-id="werdegang">
                                    <td data-name="werdegang_von">
                                        <input type="text" name="werdegang_von[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="werdegang_bis">
                                        <input type="text" name="werdegang_bis[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="werdegang_beschaeftigt_als">
                                        <input type="text" name="werdegang_beschaeftigt_als[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="werdegang_firma">
                                        <input type="text" name="werdegang_firma[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="werdegang_ort">
                                        <input type="text" name="werdegang_ort[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="werdegang_bemerkung">
                                        <textarea name="werdegang_bemerkung[]" class="form-control inputfeld"></textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <a id="add_row_werdegang" class="btn btn-success pull-right btn-xs">Weiteren Werdegang eingeben</a>
                <button type"submit" class="btn btn-info pull-left btn-xs">Werdegang speichern</button>
            </div>
        </div>       
    </form>
    <br />
    <form action="?lebenslauf_weiterbildung" method="post">
    <input type="hidden" class="form-control" name="userid" value="<?php echo $userid ?>">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Berufliche Weiterbildung:</h3>
          </div>
          <div class="panel-body">
                <div class="row clearfix">
                    <div class="col-md-12 table-responsive">
                        <br />
                        <table class="table table-bordered table-hover table_sortable_weiterbildung" id="tab_logic_weiterbildung" data-last-id="0">
                            <thead>
                                <tr >
                                    <th class="text-left" width="9%">
                                        von
                                    </th>
                                    <th class="text-left" width="9%">
                                        bis
                                    </th>
                                    <th class="text-left" width="20%">
                                        Weiterbildung als..
                                    </th>
                                    <th class="text-left" width="22%">
                                        bei der Firma/Einrichtung
                                    </th>
                                    <th class="text-left" width="13%">
                                        Ort
                                    </th>
                                    <th colspan="1" class="text-left">
                                        Bemerkung
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id='weiterbildung' data-id="weiterbildung">
                                    <td data-name="weiterbildung_von">
                                        <input type="text" name="weiterbildung_von[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="weiterbildung_bis">
                                        <input type="text" name="weiterbildung_bis[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="weiterbildung_als">
                                        <input type="text" name="weiterbildung_als[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="weiterbildung_firma">
                                        <input type="text" name="weiterbildung_firma[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="weiterbildung_ort">
                                        <input type="text" name="weiterbildung_ort[]" class="form-control inputfeld" />
                                    </td>
                                    <td data-name="weiterbildung_bemerkung">
                                        <textarea name="weiterbildung_bemerkung[]" class="form-control inputfeld" ></textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <a id="add_row_weiterbildung" class="btn btn-success pull-right btn-xs">Weitere Weiterbildung eingeben</a>
                <button type"submit" class="btn btn-info pull-left btn-xs">Weiterbildung speichern</button>
            </div>
        </div>
        <br>
    </form>

Code:

$(document).ready(function () {
     $("#add_row_werdegang").on("click", function () {
     var lastid = $("#tab_logic_werdegang").data("last-id");
     lastid++;
     $("#tab_logic_werdegang").data("last-id", lastid);
     var newtr = $("#tab_logic_werdegang tbody tr").eq(0).clone();
     newtr.attr("id", "addr" + lastid);
     $("#tab_logic_werdegang tbody").append(newtr);
     newtr.find("input, textarea").val("");
     newtr.find("button.row-remove").on("click", function () {
     $(this).closest("tr").remove();
     });
  });
    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_werdegang tbody").sortable({
        helper: fixHelperModified   
    }).disableSelection();
   $(".table-sortable_werdegang thead").disableSelection();
   $("#add_row_werdegang").trigger("click");
});

$(document).ready(function () {
     $("#add_row_weiterbildung").on("click", function () {
     var lastid = $("#tab_logic_weiterbildung").data("last-id");
     lastid++;
     $("#tab_logic_weiterbildung").data("last-id", lastid);
     var newtr = $("#tab_logic_weiterbildung tbody tr").eq(0).clone();
     newtr.attr("id", "addr" + lastid);
     $("#tab_logic_weiterbildung tbody").append(newtr);
     newtr.find("input, textarea").val("");
     newtr.find("button.row-remove").on("click", function () {
     $(this).closest("tr").remove();
     });
  });
    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_weiterbildung tbody").sortable({
        helper: fixHelperModified   
    }).disableSelection();
   $(".table-sortable_weiterbildung thead").disableSelection();
   $("#add_row_weiterbildung").trigger("click");
});

Sempervivum · 11. August 2017

Ja, das liegt daran, dass die ID der Tabelle im Skript fest einkodiert war. Das lässt sich aber relativ leicht dynamisch machen.

Beachte bei diesem HTML, dass ich die Lage der Buttons etwas verschoben habe:

HTML:

    <form action="testpost.php" method="post">
        <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered table-hover table-sortable" id="tab_logic"
                           data-last-id="0">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    von
                                </th>
                                <th class="text-center">
                                    bis
                                </th>
                                <th class="text-center">
                                    Beschäftigt als..
                                </th>
                                <th class="text-center">
                                    Bei der Firma/Einrichtung
                                </th>
                                <th class="text-center">
                                    Ort
                                </th>
                                <th colspan="2" class="text-center">
                                    Bemerkung
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0' data-id="0" class="hidden">
                                <td data-name="werdegang_von">
                                    <input type="text" name="werdegang_von[]" id="werdegang_von" class="form-control" />
                                </td>
                                <td data-name="werdegang_bis">
                                    <input type="text" name="werdegang_bis[]" id="werdegang_bis" class="form-control" />
                                </td>
                                <td data-name="werdegang_beschaeftigt_als[]">
                                    <input type="text" name="werdegang_beschaeftigt_als" id="werdegang_beschaeftigt_als" class="form-control" />
                                </td>
                                <td data-name="werdegang_firma">
                                    <input type="text" name="werdegang_firma[]" id="werdegang_firma" class="form-control" />
                                </td>
                                <td data-name="werdegang_ort">
                                    <input type="text" name="werdegang_ort[]" id="werdegang_ort" class="form-control" />
                                </td>
                                <td data-name="werdegang_bemerkung">
                                    <textarea name="werdegang_bemerkung[]" id="werdegang_bemerkung" class="form-control"></textarea>
                                </td>

                                <td data-name="del">
                                    <button nam"del0" class="btn btn-danger btn-xs glyphicon glyphicon-remove row-remove"></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <a id="add_row" class="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>

Javascript:

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").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();
                });
            });
            // Sortable Code
            $("#add_row").trigger("click");
        });

CreativPur · 11. August 2017

Ich habe es jetzt folgend übernommen, obwohl es mir spanisch ist, dass verschiedene ID´s jetzt doppelt sind, und das darf doch nicht sein, oder ??

HTML:

    <form action="?lebenslauf_werdegang" method="post">
        <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered table-hover table-sortable" id="tab_logic" data-last-id="0">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    von
                                </th>
                                <th class="text-center">
                                    bis
                                </th>
                                <th class="text-center">
                                    Beschäftigt als..
                                </th>
                                <th class="text-center">
                                    Bei der Firma/Einrichtung
                                </th>
                                <th class="text-center">
                                    Ort
                                </th>
                                <th colspan="2" class="text-center">
                                    Bemerkung
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0' data-id="0">
                                <td data-name="werdegang_von">
                                    <input type="text" name="werdegang_von[]" id="werdegang_von" class="form-control" />
                                </td>
                                <td data-name="werdegang_bis">
                                    <input type="text" name="werdegang_bis[]" id="werdegang_bis" class="form-control" />
                                </td>
                                <td data-name="werdegang_beschaeftigt_als">
                                    <input type="text" name="werdegang_beschaeftigt_als[]" id="werdegang_beschaeftigt_als" class="form-control" />
                                </td>
                                <td data-name="werdegang_firma">
                                    <input type="text" name="werdegang_firma[]" id="werdegang_firma" class="form-control" />
                                </td>
                                <td data-name="werdegang_ort">
                                    <input type="text" name="werdegang_ort[]" id="werdegang_ort" class="form-control" />
                                </td>
                                <td data-name="werdegang_bemerkung">
                                    <textarea name="werdegang_bemerkung[]" id="werdegang_bemerkung" class="form-control"></textarea>
                                </td>
                                <td data-name="del">
                                    <button nam"del0" class="btn btn-danger btn-xs glyphicon glyphicon-remove row-remove"></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <a id="add_row" class="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>
   
    <form action="?lebenslauf_weiterbildung" method="post">
        <input type="hidden" name='userid' class="form-control" value="<?php echo $userid ?>" />
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 table-responsive">
                    <table class="table table-bordered table-hover table-sortable" id="tab_logic" data-last-id="0">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    von
                                </th>
                                <th class="text-center">
                                    bis
                                </th>
                                <th class="text-center">
                                    Beschäftigt als..
                                </th>
                                <th class="text-center">
                                    Bei der Firma/Einrichtung
                                </th>
                                <th class="text-center">
                                    Ort
                                </th>
                                <th colspan="2" class="text-center">
                                    Bemerkung
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr id='addr0' data-id="0">
                                <td data-name="weiterbildung_von">
                                    <input type="text" name="weiterbildung_von[]" id="weiterbildung_von" class="form-control" />
                                </td>
                                <td data-name="weiterbildung_bis">
                                    <input type="text" name="weiterbildung_bis[]" id="weiterbildung_bis" class="form-control" />
                                </td>
                                <td data-name="weiterbildung_beschaeftigt_als">
                                    <input type="text" name="werdegang_beschaeftigt_als[]" id="weiterbildung_beschaeftigt_als" class="form-control" />
                                </td>
                                <td data-name="weiterbildung_firma">
                                    <input type="text" name="werdegang_firma[]" id="weiterbildung_firma" class="form-control" />
                                </td>
                                <td data-name="weiterbildung_ort">
                                    <input type="text" name="werdegang_ort[]" id="weiterbildung_ort" class="form-control" />
                                </td>
                                <td data-name="weiterbildung_bemerkung">
                                    <textarea name="weiterbildung_bemerkung[]" id="weiterbildung_bemerkung" class="form-control"></textarea>
                                </td>
                                <td data-name="del">
                                    <button nam"del0" class="btn btn-danger btn-xs glyphicon glyphicon-remove row-remove"></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <a id="add_row2" class="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>

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").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();
                });
            });
            // 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     
    }).disableSelection();

    $(".table-sortable thead").disableSelection();
    $("#add_row").trigger("click");
});

dennoch geht leider nur die erste Tabelle zum Klonen..

✔ Insert mehrere Zeilen mit einer Dynamic Tabelle

CreativPur

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

CreativPur

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

CreativPur

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

CreativPur

Erfahrenes Mitglied

CreativPur

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

CreativPur

Erfahrenes Mitglied

Neue Beiträge