快速表格生成：
function create_table_info(id, arr, arr_th) {
$("#" + id).html("");
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);
console.log(arr);
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;
for (const key in element) {
// console.log(element[key])
if(typeof element[key]==="object"){
console.log(element[key]);
}else{
var td = $("<td></td>");
td.text(element[key]);
tr.append(td);
}
}
table.append(tr);
}
$("#" + id).append(table);
}
加上删除 修改信息
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");