JS表格 其中有修改 和删除

function create_table(id, arr, arr_view, arr_th, del_url, edit_url, insert_url) {
            //必须包含ID 默认第一个为序号,其中设置了函数 pre_status
            var table = $("<table class='table'></table>");
            var trh = $("<tr></tr>");
            for (const element of arr_th) {
                var th = $("<th></th>");
                th.text(element);
                trh.append(th);
            }
            table.append(trh);
            var l_i = 1;
            for (const element of arr) {
                var tr = $("<tr></tr>");
                var td = $("<td></td>");
                td.text(l_i);
                tr.append(td);
                l_i = l_i + 1;
                if (arr_view.length < 1) {
                    for (const key in element) {
                        var td = $("<td></td>");
                        td.text(element[key]);
                        td.attr("data-id", element['id']);
                        td.attr("data-key", key);
                        td.attr("data-href", edit_url);
                        td.attr("class", "data-prompt");
                        tr.append(td);
                    }
                } else {
                    for (let i = 0; i < arr_view.length; i++) {
                        //此处需要你自己设置函数 pre_status
                        var key = arr_view[i];
                        if (key == "pre_status") {
                            var td = $("<td></td>");
                            var span = $("<span></span>");
                            if (element[key] > 0) {
                                span.addClass("label label-success data-btn");
                                span.attr("data-id", element['id']);
                                span.attr("data-href", edit_url);
                                span.attr("data-key", key);
                                span.attr("data-value", element[key]);
                                span.text("已经还款");
                            } else {
                                span.addClass("label label-danger data-btn");
                                span.attr("data-id", element['id']);
                                span.attr("data-href", edit_url);
                                span.attr("data-key", key);
                                span.attr("data-value", element[key]);
                                span.text("已经排款");
                            }
                            td.append(span);
                            tr.append(td);
                            //此处需要你自己设置函数
                        } else {
                            var td = $("<td></td>");
                            td.text(element[key]);
                            td.attr("data-id", element['id']);
                            td.attr("data-key", key);
                            td.attr("data-href", edit_url);
                            td.attr("class", "data-prompt");
                            tr.append(td);
                        }
                    }
                }
                fun_td = $("<td></td>");
                del_a = $("<a>删除</a>");
                del_a.attr("data-href", del_url)
                del_a.attr("data-id", element['id'])
                del_a.attr("class", "btn btn-danger del_a")
                fun_td.append(del_a)
                insert_a = $("<a class='insert_a'>插入</a>");
                insert_a.attr("data-href", insert_url)
                insert_a.attr("data-id", element['id'])
                tr.append(fun_td);
                table.append(tr);
            }
            $("#" + id).append(table);

            $(document).on("click", ".del_a", function (event) {
                var del_confirm = confirm("该操作会删除数据,请慎重操作!");
                var ths = $(this);
                if (del_confirm) {
                    ths.parent().addClass("bg-danger");
                    var url = $(this).attr('data-href');
                    var id = $(this).attr('data-id');
                    $.ajax({
                        url: url,
                        data: {
                            id: id
                        },
                        success: function (data) {
                            console.log(data);
                            //判断信息
                            if (data.status) {
                                ths.parent().parent().remove();

                            }
                        }

                    })
                }
            })
            $(document).on("click", ".data-btn", function (event) {

                var url = $(this).attr('data-href');
                var key = $(this).attr('data-key');
                var id = $(this).attr('data-id');
                var value = $(this).attr('data-value');
                var ths = $(this);
                if (value == 0) {
                    var btn_confirm = confirm("该操作会设置为已还款 OK ,请慎重操作!");
                    value = Date.now() / 1000;
                } else {
                    var btn_confirm = confirm("该操作会修改为已排款,请慎重操作!");
                    value = 0;
                }

                if (btn_confirm) {
                    ths.parent().addClass("bg-danger");
                    var url = $(this).attr('data-href');
                    var id = $(this).attr('data-id');
                    $.ajax({
                        url: url,
                        data: {
                            id: id,
                            key: key,
                            value: value
                        },
                        success: function (data) {
                            // console.log(data);
                            //判断信息
                            if (data.status) {
                                ths.parent().removeClass("bg-danger");
                                ths.parent().addClass("bg-success");
                                ths.attr('data-value', value);
                                if (value == 0) {
                                    ths.attr("class", "label label-danger data-btn")
                                    ths.text("已经排款");
                                } else {
                                    ths.attr("class", "label label-success data-btn")
                                    ths.text("已经还款");
                                }

                            }
                        }

                    })
                }
            })

            $(document).on("click", ".data-prompt", function (event) {
                var url = $(this).attr('data-href');
                var key = $(this).attr('data-key');
                var id = $(this).attr('data-id');
                $(this).addClass("bg-danger");
                var ths = $(this);
                var value = prompt("请输入修改的值:", $(this).text());//获得信息
                $.ajax({
                    url: url,
                    data: {
                        id: id,
                        key: key,
                        value: value
                    },
                    success: function (data) {
                        // console.log(data);
                        //判断信息 如果成功 就修改值
                        if (data.status) {
                            ths.removeClass("bg-danger");
                            ths.addClass("bg-success");
                            ths.html("<b>" + value + "</b>");
                        }
                    }

                })
            })
        }

调用

create_table("plan", data,arr_view=['hk_start','hk_date','hk_money','pre_status'], arr_th=["序号","开始日期","结束日期","金额","状态","操作"], del_url="{:url('portal/loan/ajax_hk_del')}", edit_url="{:url('portal/loan/ajax_hk_change')}", insert_url="ddddddd");
       

发表回复