Position in einer Dynamischen Tabelle automatisch erstellen

CreativPur

Erfahrenes Mitglied
Hi,
ich habe eine dynamische Tabelle.
PHP:
<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">
                <thead>
                    <tr >
                        <th class="text-center" width="5%">
                            Pos
                        </th>
                        <th class="text-left" width="75%">
                            Leistungen
                        </th>
                        <th class="text-left" colspan="2" width="20%">
                            Nettopreis
                    </tr>
                </thead>
                <?php
                    $kostv_nummer = $_POST['kostv_nummer'];
                    $sql = "SELECT * FROM kostenvoranschlaege WHERE kostv_nummer = '$kostv_nummer'";
                    $i++;
                    foreach ($pdo->query($sql) as $kostenvorleis) {
                ?>
                <tbody>
                    <tr id='addr0' data-id="0" class="hidden">
                        <td data-name="desc" align="center">
                            <br />
                            <?php echo $i++  ?>
                        </td>
                        <td data-name="desc">
                            <textarea name="leistung[]"  class="form-control"><?php echo $kostenvorleis['leistung']  ?></textarea>
                        </td>
                        <td data-name="mail">
                            <input type="text" name="preis_netto[]" value="<?php echo $kostenvorleis['preis_netto']  ?>"class="form-control"/>
                        </td>
                        <td data-name="del">
                            <button name="del0" class='btn btn-sm btn-danger glyphicon glyphicon-remove row-remove'><span aria-hidden="true">×</span></button>
                        </td>
                    </tr>
                </tbody>
                <?php } ?>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-primary btn-sm float-right">+</a>
</div>

Über den PLUS-Button kann ich logischerweise weitere Zeilen hinzufügen.
Leider komme ich mit zwei Funktionen im Script nicht klar.

Javascript:
$(document).ready(function() {
    $("#add_row").on("click", function() {
        // Dynamic Rows Code
        // Get max row id and set new id
        var newid = 0;
        $.each($("#tab_logic 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 tbody tr:nth(0) td"), function() {
            var td;
            var cur_td = $(this);
            var children = cur_td.children();
            // add new td and element if it has a nane
            if ($(this).data("name") !== undefined) {
                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 {
                td = $("<td></td>", {
                    'text': $('#tab_logic tr').length
                }).appendTo($(tr));
            }
        });
        // add the new row
        $(tr).appendTo($('#tab_logic'));
        
        $(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 tbody").sortable({
        helper: fixHelperModified     
    }).disableSelection();
    $(".table-sortable thead").disableSelection();
    $("#add_row").trigger("click");
});

Wenn ein weiteres Feld durch den PLUS-Button ausgewählt wird, wird unter dem ersten Datensatz win weiteres Feld sichtbar.

Erstens möchte ich die weiteren Felder an das Ende der Tabelle einfügen,
des Weiteren möchte ich gern, dass die POS. "$i++" fortlaufend weiter geführt und ausgegeben wird.

In wie fern muss ich das Script ändern ?
 

Anhänge

  • Bildschirmfoto 2021-03-21 um 09.34.10.png
    Bildschirmfoto 2021-03-21 um 09.34.10.png
    33 KB · Aufrufe: 9
Versuche mal deinem <tbody> die ID zu vergeben an die du deine neue Zeile anfügst.

Wäre mein Vorschlag
 
Zurück