✔ Add dynamic table

CreativPur · 3. Juni 2017

Hi,

ich habe eine dynamische Tabelle, wo ich die Tabelle klonen kann..

HTML:

<div class="row clearfix">
            <div class="col-md-12 table-responsive">
                <br />
                <table class="table table-bordered table-hover table_sortable_werdegang" id="tab_logic_werdegang">
                    <thead>
                        <tr >
                            <th class="text-left">
                                von
                            </th>
                            <th class="text-left">
                                bis
                            </th>
                            <th class="text-left">
                                Beschäftigt als..
                            </th>
                            <th class="text-left">
                                Bei der Firma
                            </th>
                            <th class="text-left">
                                   In Ort
                            </th>
                            <th colspan="2" class="text-left">
                                   Bemerkung
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id='werdegang' data-id="werdegang" class="">
                            <td data-name="werdegang_von">
                                <input type="text" name='werdegang_von'  placeholder='von' class="form-control"/>
                            </td>
                            <td data-name="werdegang_bis">
                                <input type="text" name='werdegang_bis' placeholder='bis' class="form-control"/>
                            </td>
                            <td data-name="werdegang_beschaeftigt_als">
                                <input type="text" name='werdegang_beschaeftigt_als' placeholder='Beschäftigt als..' class="form-control"/>
                            </td>
                            <td data-name="werdegang_firma">
                                <input type="text" name='werdegang_firma' placeholder='Firma' class="form-control"/>
                            </td>
                            <td data-name="werdegang_ort">
                                <input type="text" name='werdegang_ort' placeholder='Ort' class="form-control"/>
                            </td>
                            <td data-name="werdegang_bemerkung">
                                <textarea name="werdegang_bemerkung" placeholder="Bemerkung" class="form-control"></textarea>
                            </td>
                            <td data-name="del">
                                <button nam"del_werdegang" class='btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen'></button>
                                <button nam"aendern_werdegang" class='btn btn-success glyphicon glyphicon-refresh btn-xs'></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <a id="add_row_werdegang" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>

Code:

$(document).ready(function() {
    $("#add_row_werdegang").on("click", function() {
        // Dynamic Rows Code
       
        // Get max row id and set new id
        var newid = 0;
        $.each($("#tab_logic_werdegang tr"), function() {
            if (parseInt($(this).data("id")) > newid) {
                newid = parseInt($(this).data("id"));
            }
        });
        newid++;
       
        var tr = $("<tr></tr>", {
            id: "addr"+newid,
            "data-id": newid
        });
       
        // loop through each td and create new elements with name of newid
        $.each($("#tab_logic_werdegang tbody tr:nth(0) td"), function() {
            var cur_td = $(this);
           
            var children = cur_td.children();
           
            // add new td and element if it has a nane
            if ($(this).data("name") != undefined) {
                var td = $("<td></td>", {
                    "data-name": $(cur_td).data("name")
                });
               
                var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
                c.attr("name", $(cur_td).data("name") + newid);
                c.appendTo($(td));
                td.appendTo($(tr));
            } else {
                var td = $("<td></td>", {
                    'text': $('#tab_logic_werdegang tr').length
                }).appendTo($(tr));
            }
        });

        // add the new row
        $(tr).appendTo($('#tab_logic_werdegang'));
       
        $(tr).find("td 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_werdegang tbody").sortable({
        helper: fixHelperModified     
    }).disableSelection();

    $(".table_sortable_werdegang thead").disableSelection();



    $("#add_row_werdegang").trigger("click");
});

Nun möchte ich auf der gleichen Seite weitere dynamische Tabellen in der gleichen Form unterbringen.
Logischerweise muss ich allen Tabellen und den dazugehörigen Script einen anderen Namen, bzw. Id zuweisen, welches ich in Tabelle 2 auch getan habe..

HTML:

<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">
                    <thead>
                        <tr >
                            <th class="text-left">
                                von
                            </th>
                            <th class="text-left">
                                bis
                            </th>
                            <th class="text-left">
                                Beschäftigt als..
                            </th>
                            <th class="text-left">
                                Bei der Firma
                            </th>
                            <th class="text-left">
                                   In Ort
                            </th>
                            <th colspan="2" class="text-left">
                                   Bemerkung
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr id='werdegang' data-id="weiterbildung" class="">
                            <td data-name="weiterbildung_von">
                                <input type="text" name='weiterbildung_von'  placeholder='von' class="form-control"/>
                            </td>
                            <td data-name="weiterbildung_bis">
                                <input type="text" name='weiterbildung_bis' placeholder='bis' class="form-control"/>
                            </td>
                            <td data-name="weiterbildung_beschaeftigt_als">
                                <input type="text" name='weiterbildung_beschaeftigt_als' placeholder='Beschäftigt als..' class="form-control"/>
                            </td>
                            <td data-name="weiterbildung_firma">
                                <input type="text" name='weiterbildung_firma' placeholder='Firma' class="form-control"/>
                            </td>
                            <td data-name="weiterbildung_ort">
                                <input type="text" name='weiterbildung_ort' placeholder='Ort' class="form-control"/>
                            </td>
                            <td data-name="weiterbildung_bemerkung">
                                <textarea name="weiterbildung_bemerkung" placeholder="Bemerkung" class="form-control"></textarea>
                            </td>
                            <td data-name="del">
                                <button nam"del_weiterbildung" class='btn btn-danger glyphicon glyphicon-remove row-remove btn-xs loeschen'></button>
                                <button nam"aendern_weiterbildung" class='btn btn-success glyphicon glyphicon-refresh btn-xs'></button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <a id="add_row_weiterbildung" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>

Code:

$(document).ready(function() {
    $("#add_row_weiterbildung").on("click", function() {
        // Dynamic Rows Code
       
        // Get max row id and set new id
        var newid = 0;
        $.each($("#tab_logic_weiterbildung tr"), function() {
            if (parseInt($(this).data("id")) > newid) {
                newid = parseInt($(this).data("id"));
            }
        });
        newid++;
       
        var tr = $("<tr></tr>", {
            id: "addr"+newid,
            "data-id": newid
        });
       
        // loop through each td and create new elements with name of newid
        $.each($("#tab_logic_weiterbildung tbody tr:nth(0) td"), function() {
            var cur_td = $(this);
           
            var children = cur_td.children();
           
            // add new td and element if it has a nane
            if ($(this).data("name") != undefined) {
                var td = $("<td></td>", {
                    "data-name": $(cur_td).data("name")
                });
               
                var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
                c.attr("name", $(cur_td).data("name") + newid);
                c.appendTo($(td));
                td.appendTo($(tr));
            } else {
                var td = $("<td></td>", {
                    'text': $('#tab_logic_weiterbildung tr').length
                }).appendTo($(tr));
            }
        });
       
       
        // add the new row
        $(tr).appendTo($('#tab_logic_weiterbildung'));
       
        $(tr).find("td button.row-remove").on("click", function() {
             $(this).closest("tr").remove();
        });
});

Leider funktioniert nur die erste Tabelle. Die 2. Tabelle lässt sich über den Button

HTML:

<a id="add_row_weiterbildung" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>

leider nicht klonen..
Welche Veränderungen bzw. Zuweisungen muss ich noch vornehmen ?

Sempervivum · 3. Juni 2017

Bei mir funktioniert das Klonen einwandfrei. Ich musste jedoch bei beiden Javascript-Abschnitten schließende Klammern hinzu fügen:

Code:

});

Besteht dieser Fehler auch bei dir?

Den Javascript-Code hättest Du nicht zu verdoppeln brauchen: ID der Tabelle als data-Attribut in den Knöpfen für das Klonen und im Skript auswerten und die Variable verwenden:

Code:

    <a id="add_row_werdegang" data-table-id="tab_logic_werdegang" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>

    <a id="add_row_weiterbildung" data-table-id="tab_logic_weiterbildung" class="btn btn-success pull-right btn-xs">Weiteren beruflichen Werdegang</a>

    <script>
        $(document).ready(function () {
            $(".btn.btn-success").on("click", function () {
                // Get id of table from data attribute
                var tableid = $(this).data("table-id");
                // Dynamic Rows Code

                // Get max row id and set new id
                var newid = 0;
                $.each($("#" + tableid + " tr"), function () {
                    if (parseInt($(this).data("id")) > newid) {
                        newid = parseInt($(this).data("id"));
                    }
                });
                newid++;

                var tr = $("<tr></tr>", {
                    id: "addr" + newid,
                    "data-id": newid
                });

                // loop through each td and create new elements with name of newid
                $.each($("#" + tableid + " tbody tr:nth(0) td"), function () {
                    var cur_td = $(this);

                    var children = cur_td.children();

                    // add new td and element if it has a nane
                    if ($(this).data("name") != undefined) {
                        var td = $("<td></td>", {
                            "data-name": $(cur_td).data("name")
                        });

                        var c = $(cur_td).find($(children[0]).prop('tagName')).clone().val("");
                        c.attr("name", $(cur_td).data("name") + newid);
                        c.appendTo($(td));
                        td.appendTo($(tr));
                    } else {
                        var td = $("<td></td>", {
                            'text': $("#" + tableid + " tr").length
                        }).appendTo($(tr));
                    }
                });

                // add the new row
                $(tr).appendTo($("#" + tableid));

                $(tr).find("td button.row-remove").on("click", function () {
                    $(this).closest("tr").remove();
                });
            });
        });

CreativPur · 3. Juni 2017

Super.... Funktioniert einwandfrei.... Vielen Dank und schöne Pfingsten...

✔ Add dynamic table

CreativPur

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

CreativPur

Erfahrenes Mitglied

Neue Beiträge