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

最新推荐文章于 2024-03-15 09:35:06 发布

星尘库

最新推荐文章于 2024-03-15 09:35:06 发布

阅读量857

点赞数 8

分类专栏： javascript 文章标签： javascript json

本文链接：https://blog.csdn.net/qq_28821897/article/details/135434235

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细描述了如何通过jQuery的AJAX功能从后端API获取数据，然后解析JSON并动态创建HTML表格，包括表头和操作按钮（如编辑和删除）。

摘要由CSDN通过智能技术生成

怎么在前端获取后端数据生成表格json

  $.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);
            }
        });