Query利用JSON数据动态生成表格

最新推荐文章于 2024-05-22 16:01:24 发布
最新推荐文章于 2024-05-22 16:01:24 发布
阅读量324 收藏
点赞数
分类专栏： js知识点 文章标签： jquery json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WuqibuHuan/article/details/107320801
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
    
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
    
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
    <script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
    <script>
          $(document).ready(function () {
                var json = { 'columns': [{ 'FieldID': 'Column1', 'Title': 'Info Header 1' }, { 'FieldID': 'Column2', 'Title': 'Info Header2' }, { 'FieldID': 'Column3', 'Title': 'Info Header3' }], 'rows': [{ 'Column1': '1A', 'Column2': '1B', 'Column3': '1C' }, { 'Column1': '2A', 'Column2': '2B', 'Column3': '2C' }] };
                var th;
                $.each(json.columns, function (colIndex, col) {
                    th += "<th>" + col.Title + "</th>";
                });
                $("#myTb").append("<tr>" + th + "</tr>");

                //行遍历
                $.each(json.rows, function (rowIndex, row) {
                    var tr;
                    //列遍历
                    $.each(json.columns, function (colIndex, col) {
                        tr += '<td>' + row[col.FieldID] + '</td>'
                    })

                    $("#myTb").append('<tr>' + tr + '</tr>');
                });

            });
    </script>
    <table class="gridtable" id="myTb">
    
    </table>
</body>
</html>
厚积薄发的Cicci
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Power query解析json字符串转化为表格和将excel表格生成json格式字符串
qq_24499417的博客
08-11 7123
     今天讲解一下在excel里面利用Power query生成json格式的字符串。在power query中处理json的函数有两个。一个是Json.Document()函数,用于解析json字符串，将其转化为list或者record对象。这个在网抓的时候我们多用到。只要把字符串处理成标准的json格式，直接在外面套上Json.Document()函数就可以了。如下图，我先得到一个json...
一文说透 MySQL JSON 数据类型（收藏）
m0_67322837的博客
05-09 1万+
JSON 数据类型是 MySQL 5.7.8 开始支持的。在此之前，只能通过字符类型（CHAR，VARCHAR 或 TEXT ）来保存 JSON 文档。 相对字符类型，原生的 JSON 类型具有以下优势： 在插入时能自动校验文档是否满足 JSON 格式的要求。 优化了存储格式。无需读取整个文档就能快速访问某个元素的值。 在 JSON 类型引入之前，如果我们想要获取 JSON 文档中的某个元素，必须首先读取整个 JSON 文档，然后在客户端将其转换为 JSON 对象，最后再通过对象获取指定元素的值。
vxe-table的安装与使用
最新发布
weixin_46394325的博客
05-22 1663
功能更强大的table组件
三级嵌套的json数据自动生成表格并合并单元格
fangcaojushi的博客
11-21 346
三级嵌套的json数据 ：班级嵌套学生，学生中嵌套全部时间的考试成绩， 自动生成表格并合并单元格，如图。
mysql处理json格式的字段，一文搞懂mysql解析json数据
热门推荐
秃了也弱了
08-25 1万+
JSON 数据类型是 MySQL 5.7.8 开始支持的。在此之前，只能通过字符类型（CHAR，VARCHAR 或 TEXT ）来保存 JSON 文档。 MySQL 8.0版本中增加了对JSON类型的索引支持。可以使用CREATE INDEX语句创建JSON类型的索引，提高JSON类型数据的查询效率。 存储JSON文档所需的空间与存储LONGBLOB或LONGTEXT所需的空间大致相同。 在MySQL 8.0.13之前，JSON列不能有非空的默认值。 JSON 类型比较适合存储一些列不固定、修改较少
php输出json到表格,PHP中把数据库查询结果输出为json格式
weixin_39864738的博客
03-22 368
header("Content-type:text/html;charset=utf-8");//字符编码设置$servername = "localhost";$username = "root";$password = "root";$dbname = "tjks";// 创建连接$con =mysqli_connect($servername, $username, $password, $...
一文说透 MySQL JSON 数据类型
Trouvailless的博客
05-05 2005
JSON 数据类型是 MySQL 5.7.8 开始支持的。在此之前，只能通过字符类型（CHAR，VARCHAR 或 TEXT ）来保存 JSON 文档。 相对字符类型，原生的 JSON 类型具有以下优势： 在插入时能自动校验文档是否满足 JSON 格式的要求。 优化了存储格式。无需读取整个文档就能快速访问某个元素的值。 在 JSON 类型引入之前，如果我们想要获取 JSON 文档中的某个元素，必须首先读取整个 JSON 文档，然后在客户端将其转换为 JSON 对象，最后再通过对象获取指定元素的值。
ajax json jq 表单,jq之ajax以及json数据传递
weixin_36445866的博客
08-05 255
闭包演示function transfer(){var dat = $( "#sel" ).val();//console.log(dat)$.ajax({type:"POST", //post 同 geturl:"ts1.php",data:{data:dat},//console.log(data);success:f...
ajax 中json格式数据格式,AJAX中的dataType(数据格式)-text、json
weixin_33576058的博客
08-05 3095
因为经常使用数据格式，所以将它封装成类，J这样就不会用到时就写了，直接调用写好的类就可以了(1)dataType数据格式为：TEXT格式的数据是字符串的数据，在“ajax对数据进行删除和查看”的那篇博客中说过，这里在说下结果不会每个传输的都是字符串，有时是二维数组，这样就要转换为字符串格式了class DBDA{public $host="localhost"; //数据库连接public $ui...
关于PowerQuery数据源获取那三两事
weixin_44843830的博客
08-13 3649
本文章为个人学习笔记，主要是对Excel、PowerBI中，对于数据源的获取渠道进行简单学习，不知道会不会更新，差不多就这样了。 获取方式 Excel Excel主要是在 “数据”=》“获取和转换数据” 这里进行数据获取 PowerBI 一般可以刚打开的时候点击数据源 或者在主页的标签里面进行选择 一、表格获取数据 （多工作表为例） Excel: 选择适合的文件，直接导入 导航器可以预览数据，点击“选择多项”才可以选择多个表格。 然后直接点击“加载”。 “转换数据”是进行Power Query查询器
oracle格式化查看json数据
05-25
在Oracle数据库中，处理JSON数据已经变得越来越常见，特别是在现代应用程序和数据分析中。Oracle提供了强大的JSON支持，...通过有效利用这些功能，你可以更有效地管理和操作JSON数据，提高应用程序的性能和用户体验。
数据库-唐诗三百首数据集
06-28
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在这个数据集中，每首诗可能会被表示为一个JSON对象，每个属性对应一个字段，如{"诗人": "李白", "诗...
Oracle JSON 字符串处理实例
03-03
首先，Oracle 12c及更高版本引入了JSON相关的数据类型和函数，如`JSON_OBJECT`和`JSON_ARRAY`用于创建JSON，`JSON_VALUE`和`JSON_QUERY`用于提取数据，以及`JSON_TABLE`用于将JSON数据转换为关系表结构。 `JSON_...
基于JAVA的数据可视化分析平台，自由制作任何您想要的数据看板，支持接入SQL、CSV、Excel、HTTP接口、JSON等
01-03
平台支持JSON数据解析，适应现代Web服务的数据传输需求。 3. **数据看板制作**：用户可以根据自己的业务需求，自由设计和定制数据看板，包括选择图表类型、设置数据字段、定义过滤条件、添加交互元素等，使得数据...
省市区二三级数据xml,sql,json
11-08
省市区的JSON数据会形成嵌套的对象结构： ```json { "regions": [ { "id": 1, "name": "广东省", "cities": [ { "id": 11, "name": "广州市", "districts": [ {"id": 111, "name": "天河区"}, {/* 其他...
如何取到对象中的某个值
WuqibuHuan的博客
06-30 4183
$.ajax({ type: "post", url: basePath + '/Type/Category', // data: "data", dataType: "json", success: fu...
解决前端对应后台的导出接口 window.open()提交数据 参数过长的问题
WuqibuHuan的博客
08-19 3700
一般 window.open 传参数都是用Get.方式，在url后面拼接参数。 但这样有时候并不适用，如： 1）不想被看到参数信息 2）参数过长，get有限制会被截断 3）可能有中文编码问题 所以需要用post方式 ,下面说的就是一种window.open发送post请求的方法。 网页的post一般是通过form表单的方式来实现的，所以现在来模拟form表单的方式来实现window.open效果。 var winHeight = window.document.documentElement.clien
js处理数组 ，对象 ，格式问题汇总（持续更新）
WuqibuHuan的博客
06-03 1554
let arr = [ { 'id': '1', 'name': '小红', }, { 'id': '2', 'name: '小白', }, { 'id': '3', 'name': '小黄', } ]; // 使用map()生成数组 let new_arr = arr.map(obj => {return obj.name}) // 输出 ['小红','小白','小黄'] ...
java 根据jdbc查询的数据 生成表格
06-11
要生成表格，您可以使用Java的Swing组件库，其中包括JTable组件。以下是一个简单的示例代码，用于使用JDBC从数据库中检索数据并将其显示在JTable中： ```java import javax.swing.*; import java.sql.*; public class JDBCTableExample { public static void main(String[] args) { String url = "jdbc:mysql://localhost:3306/mydatabase"; String user = "username"; String password = "password"; String query = "SELECT * FROM mytable"; try (Connection con = DriverManager.getConnection(url, user, password); PreparedStatement pst = con.prepareStatement(query); ResultSet rs = pst.executeQuery()) { JTable table = new JTable(buildTableModel(rs)); JOptionPane.showMessageDialog(null, new JScrollPane(table)); } catch (SQLException e) { System.err.println("Error: " + e.getMessage()); } } public static DefaultTableModel buildTableModel(ResultSet rs) throws SQLException { ResultSetMetaData metaData = rs.getMetaData(); // names of columns String[] columnNames = new String[metaData.getColumnCount()]; for (int i = 1; i <= metaData.getColumnCount(); i++) { columnNames[i - 1] = metaData.getColumnName(i); } // data of the table Object[][] data = new Object[100][metaData.getColumnCount()]; int row = 0; while (rs.next()) { for (int i = 1; i <= metaData.getColumnCount(); i++) { data[row][i - 1] = rs.getObject(i); } row++; } return new DefaultTableModel(data, columnNames); } } ``` 在这个例子中，我们使用JDBC从数据库中检索数据，然后使用buildTableModel方法将ResultSet转换为DefaultTableModel，然后将其传递给JTable。最后，我们将JTable放入JScrollPane中，并将其显示在对话框中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值