前端動態新增刪除 - 未優化

Posted on Edited on In Views: Disqus:

 

範例如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <div class="form-group row">
        <div class="col-sm-9">
            <input id="insertField" class="form-control form-control-sm text-left" type="text">
        </div>
        <div class="col-sm-3">
            <button id="btnOpenDetail" type="button" class="btn btn-primary btn-sm">新增品項</button>
        </div>
    </div>

    <form id="formDetail">
        <div class="form-group row">
            <div class="col-sm-2">
                <input name="AR_NO" type="text" readonly="" class="form-control-plaintext text-right" value="0">
            </div>
            <div class="col-sm-8">
                <input name="Item_Name" type="text" class="form-control form-control-sm text-left" value="ps">
            </div>
            <div class="col-sm-2">
                <button name="delete" type="button" class="btn btn-primary btn-sm">刪除</button>
            </div>
        </div>

    </form>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <script>
        var COUNT_DETAIL = 0;

        const LAYOUT_GRID = [
            "col-sm-2",
            "col-sm-8",
            "col-sm-2"
        ];

        const LAYOUT_INPUT = {
            U_ID: "",
            AR_NO: "form-control-plaintext text-right",
            Item_Name: "form-control form-control-sm text-left",
            Item_Quantity: "form-control form-control-sm text-right",
            Item_Price: "form-control form-control-sm text-right",
            Item_Amount_Original: "form-control form-control-sm text-right",
            Item_Tax_Original: "form-control form-control-sm text-right",
            Delete_Button: "btn btn-primary btn-sm"
        };

        $(document).ready(function () {
            COUNT_DETAIL = 0;

            document.getElementById("btnOpenDetail").addEventListener("click", function () {
                var insertArray = [$("#insertField").val()];
                makeFormGroupRow(insertArray);
            });

            detailAddsAttachEvents();
        });

        function makeFormGroupRow(insertArray) {
            var objInputs = [];
            objInputs = makeInputTag(objInputs, insertArray);

            var objlItems = [];
            objlItems = makeLayoutArray(objlItems, objInputs);

            var form_group_row = document.createElement("div");
            form_group_row.setAttribute("class", "form-group row");
            $.each(objlItems, function (index) {
                form_group_row.appendChild(objlItems[index]);
            });
            $("#formDetail").append(form_group_row);
        }

        function makeInputTag(objInputs, insertArray) {
            var AR_NO = document.createElement("input");
            AR_NO.setAttribute("name", "AR_NO");
            AR_NO.setAttribute("type", "text");
            AR_NO.setAttribute("class", LAYOUT_INPUT["AR_NO"]);
            AR_NO.setAttribute("value", ++COUNT_DETAIL);
            AR_NO.setAttribute("readonly", "");
            objInputs.push(AR_NO);

            var Item_Name = document.createElement("input");
            Item_Name.setAttribute("name", "Item_Name");
            Item_Name.setAttribute("type", "text");
            Item_Name.setAttribute("class", LAYOUT_INPUT["Item_Name"]);
            Item_Name.setAttribute("value", insertArray[0]);
            Item_Name.setAttribute("required", "required");
            objInputs.push(Item_Name);

            var Delete_Button = document.createElement("button");
            Delete_Button.setAttribute("name", "delete");
            Delete_Button.setAttribute("type", "button");
            Delete_Button.setAttribute("class", LAYOUT_INPUT["Delete_Button"]);
            Delete_Button.innerText = "刪除";
            Delete_Button.addEventListener("click", function () {
                var index = $("#formDetail>div").index(this.parentElement.parentElement);
                $("#formDetail> div:eq(" + index + ")").remove();
            });
            objInputs.push(Delete_Button);
            return objInputs;
        }

        function makeLayoutArray(objlItems, objInputs) {
            if (objInputs.length === LAYOUT_GRID.length) {
                $.each(LAYOUT_GRID, function (index) {
                    var layout = document.createElement("div");
                    layout.setAttribute("class", LAYOUT_GRID[index]);
                    layout.appendChild(objInputs[index]);
                    objlItems.push(layout);
                });
            } else {
                console.log("error:objInputs.length not equal LAYOUT_GRID.length");
            }
            return objlItems;
        }

        function detailAddsAttachEvents() {
            $("[name='delete']").click(function () {
                var index = $("#formDetail>div").index(this.parentElement.parentElement);
                $("#formDetail> div:eq(" + index + ")").remove();
            });
        }

    </script>
</body>

</html>

執行畫面