怎么在前端获取后端数据生成表格json
javascript
$.ajax({
url: '/Resource/GetResource',
data: { searchText: searchText },
success: function (response) {
/*searchResult.innerHTML = response;*/
console.log('输入框 ：', response);
// 假设你有一个具有 id 为 "tableContainer" 的 HTML 元素用于显示表格
var tableContainer = document.getElementById("centerbox");
// 解析 JSON 字符串
var data = JSON.parse(response);
// 创建表格元素
var table = document.createElement("table");
table.className = "table table-hover table-striped";
// 创建表头
var thead = document.createElement("thead");
var headerRow = document.createElement("tr");
Object.keys(data[0]).forEach(function (key) {
var th = document.createElement("th");
th.textContent = key;
headerRow.appendChild(th);
});
// 添加编辑和删除表头
var actionTh = document.createElement("th");
actionTh.textContent = "操作";
headerRow.appendChild(actionTh);
thead.appendChild(headerRow);
table.appendChild(thead);
// 创建表格内容
var tbody = document.createElement("tbody");
data.forEach(function (row) {
var tr = document.createElement("tr");
Object.values(row).forEach(function (value,index) {
var td = document.createElement("td");
td.textContent = value;
tr.appendChild(td);
if (index === 1) {
// 隐藏第二列的数据，创建一个按钮来显示数据
var button = document.createElement("button");
button.textContent = "Show Data打开";
button.addEventListener("click", function () {
// 点击按钮时显示第二列的数据
td.style.display = "table-cell";
button.style.display = "none";
});
tr.appendChild(button);
}
});
// 添加编辑和删除按钮
var editButton = document.createElement("button");
editButton.textContent = "Edit";
editButton.addEventListener("click", function () {
// 编辑按钮点击事件处理程序
// 在这里编写编辑逻辑
console.log("Edit button clicked for row:", row);
});
tr.appendChild(editButton);
var deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
deleteButton.addEventListener("click", function () {
// 删除按钮点击事件处理程序
// 在这里编写删除逻辑
console.log("Delete button clicked for row:", row);
});
tr.appendChild(deleteButton);
tbody.appendChild(tr);
});
table.appendChild(tbody);
// 将表格添加到容器中
tableContainer.appendChild(table);
}
});