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);
            }
        });
相关推荐
从兄39 分钟前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf2 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
薛一半3 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
过期的H2O23 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
你好龙卷风!!!4 小时前
vue3 怎么判断数据列是否包某一列名
前端·javascript·vue.js
shenweihong5 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
巧克力小猫猿6 小时前
基于ant组件库挑选框组件-封装滚动刷新的分页挑选框
前端·javascript·vue.js
嚣张农民6 小时前
一文简单看懂Promise实现原理
前端·javascript·面试
迃-幵7 小时前
力扣:225 用队列实现栈
android·javascript·leetcode