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

最新推荐文章于 2024-05-22 16:01:24 发布

厚积薄发的Cicci

最新推荐文章于 2024-05-22 16:01:24 发布

阅读量324

点赞数

分类专栏： js知识点文章标签： jquery json

本文链接：https://blog.csdn.net/WuqibuHuan/article/details/107320801

版权

js知识点专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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
评论
Query利用JSON数据动态生成表格

<!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"> ta
复制链接

扫一扫