JavaScript获取后端json数据创建表格

怎么在前端获取后端数据生成表格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);
            }
        });
相关推荐
PandaCave6 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟8 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾30 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧38 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
一条晒干的咸魚3 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷3 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
sinat_384241094 小时前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
小牛itbull4 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress