BootstrapSQLiteBlog/lib/TableEditor.php

<?php
    class TableEditor
    {
        public static function render($strTableName, $varColumns)
        {
            global $c;

            $varRows = $c->query("SELECT * from {$strTableName}");
            $varKeys = [];

            $strInput = file_get_contents("php://input");

            if (strlen($strInput) > 0)
            {
                $a = json_decode($strInput, true);
                $output = [];

                foreach ($a as $r)
                {
                    $strColumns = "";
                    $strQMarks  = "";
                    $strSetLns  = "";
                    $varValues  = [];

                    foreach ($varColumns as $strCol)
                    {
                        $strColumns     .= "{$strCol}, ";
                        $strQMarks      .= "?, ";
                        $strSetLns      .= "{$strCol} = ?, ";
                        $varValues[]    = $r[$strCol];
                    }

                    $strColumns = preg_replace("/, $/", "", $strColumns);
                    $strQMarks  = preg_replace("/, $/", "", $strQMarks);
                    $strSetLns  = preg_replace("/, $/", "", $strSetLns);
                    


                    if (strlen($r["id"]) < 1)
                    {
                        $c->query(
                            "INSERT into {$strTableName} ({$strColumns}) values ({$strQMarks})",
                            $varValues);

                        continue;
                    }

                    if (intval($r["delete"]) == 1)
                    {
                        $c->query("DELETE from {$strTableName} where id = ?", $r["id"]);
                        continue;
                    }

                    $c->query(
                        "UPDATE {$strTableName}
                        set {$strSetLns}
                        where id = ?",
                        $varValues,
                        $r["id"]);

                    $output[] = $r;
                }

                Respond::json(["message" => "success", "output" => $output]);
            }
            ?>

            <div class="navbar navbar-expand bg-body-tertiary d-flex px-3 sticky-top">

                <div class="container justify-content-between">
                    <div class="navbar-nav d-inline-flex">
                        <span class="navbar-brand">Options</span>
                         <a class="btn btn-outline-success" onclick="fnSave();"><i class="fa fa-fw fa-save"></i> Save</a>
                    </div>

                    <div class="navbar-nav d-inline-flex">
                    </div>
                </div>
            </div>

            <style>
                /* https://github.com/twbs/bootstrap/issues/37184  */
                .dropdown-menu {
                    z-index: 1040 !important;
                }

                /*
                th:first-child,
                th:last-child {
                    width: 7.5%;
                    background: #F00 !important;
                }*/

                .table-responsive {
                    overflow-x: scroll;
                }

                .w-input {
                    width: 15em !important;
                }

                tr td:first-child input[type="text"]
                {
                    width: 5em !important;
                }
            </style>


            <div class="container">
                <div class="row my-5">
                    <div class="col-lg-12">
                        
            <?php if (count($varRows) > 0): ?>
                <div class="table-responsive">
                <table class="table table-borderless">
                    <thead>
                        <tr>
                            <?php foreach($varRows[0] as $k => $v): ?>
                                <?php
                                    $varKeys[] = $k;
                                ?>
                                <th><?= $k; ?></th>
                            <?php endforeach; ?>

                            <th></th>
                        </tr>
                    </thead>

                    <tbody>
                        <?php foreach ($varRows as $r): ?>
                            <tr>
                                <?php foreach ($varKeys as $k): ?>
                                    <td>
                                        <div class="input-group">
                                            <input type="text" class="form-control w-input" name="<?= $k; ?>" value="<?= $r[$k]; ?>" />
                                        </div>
                                    </td>
                                <?php endforeach; ?>

                                <td class="align-middle text-nowrap">
                                    <input type="hidden" name="delete" value="0" />
                                    <a class="" onclick="fnCloneRow(this);"><i class="fa fa-fw fa-copy"></i></a>
                                    <a class="" onclick="fnDeleteRow(this);"><i class="fa fa-fw fa-trash"></i></a>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
                </div>
            <?php endif; ?>


                    </div>
                </div>
            </div>

            <script>
                $(function() {
                    fnSerialize = function() {
                        var a = [];

                        $("table tbody tr").each(function(i, x) {
                            x = $(x);

                            var inputs = x.find("input");
                            var o = {};

                            inputs.each(function(i2, x2) {
                                x2 = $(x2);
                                var key     = x2.attr("name");
                                var value   = x2.val();
                                o[key] = value;
                            });

                            a.push(o);
                        });

                        console.log(a);
                        return a;
                    };

                    fnSave = function()
                    {
                        var data = fnSerialize();

                        $.ajax({
                            url: "",
                            method: "post",
                            data: JSON.stringify(data),
                            success: function(r)
                            {
                                console.log(r);
                            }
                        });
                    };

                    fnCloneRow = function(x)
                    {
                        x = $(x);
                        var row = x.parents("tr").first();

                        var rowCopy = row.clone();

                        rowCopy.insertAfter(row);

                        rowCopy.find("input").each(function(i, x2) {
                            x2 = $(x2);
                            x2.val("");
                        });
                    };

                    fnDeleteRow = function(x)
                    {
                        x = $(x);
                        var row = x.parents("tr").first();
                        row.hide();
                        row.find("[name='delete']").first().val("1");
                    };
                });
            </script>
            <?php
        }
    }
?>