请求帮忙修改一下这段代码

w52110 · 发表于 2022-10-1 11:16

比如 get 获取到的数据是这种json数组格式
想实现一下条件
1、取消按钮打开该页面直接就能看得到表格内容
2、现有的表单获取不到数据，请求高手帮忙修改下
微信截图_20221001111327.png

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTML>
<html>
<head>
<title>利用json数据动态创建表格</title>
<meta charset="utf-8" />
<style>
table{width:600px; 
border-collapse:collapse; 
text-align:center;
}
td,th{border:1px solid #ccc}
</style>

</head>
<body>
<div id="data"></div>
		<center>
       
            <table border="1px solid">
                <tr>
                    <th>reqMsgType</th>
                    <th>年龄</th>
                    <th>性别</th>
                     <th>性别</th>
                  </tr>
            </table>
            <input type="button" value="加载数据" />

        </center>



<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script>
        $(function(){
            $(':input:eq(0)').click(function(){
                $.ajax({
                    url: 'url',
                    type: 'get',
                    dataType: 'json',

                    success: function(datas){
                        var tbhtml = "<tr><th>reqMsgType</th><th>reqFromUserName</th><th>reqCreateTime</th><th>reqMsgType</th></tr>";
                        for(var i = 0;i<datas.length;i++){
                                tbhtml+="<tr><td>"+datas[i].reqMsgType+"</td><td>"+datas[i].reqFromUserName+"</td><td>"+datas[i].reqCreateTime+"</td><td>"+datas[i].reqMsgType+"</td></tr>";
                        }

                        $('table:eq(0)').html(tbhtml);
                    }
                })
            })
        })
        </script>

get到的json文本数组

[Asm] 纯文本查看 复制代码

"[{\"reqMsgType\": \"text\", \"reqCreateTime\": 1664471349, \"reqToUserName\": \"ww4ddb472180ea\", \"reqFromUserName\": \"adea\"},{\"reqMsgType\": \"text\", \"reqCreateTime\": 1664471378, \"reqToUserName\": \"ww4ddb472180ea\", \"reqFromUserName\": \"adea\"},{\"reqMsgType\": \"text\", \"reqCreateTime\": 1664471387, \"reqToUserName\": \"ww4ddb472180ea\", \"reqFromUserName\": \"adea\"},{\"reqMsgType\": \"text\", \"reqCreateTime\": 1664471429, \"reqToUserName\": \"ww4ddb472180ea\", \"reqFromUserName\": \"adea\"},{\"reqMsgType\": \"text\", \"reqCreateTime\": 1664472638, \"reqToUserName\": \"ww4ddb472180ea\", \"reqFromUserName\": \"adea\"},{\"reqMsgType\": \"text\", \"reqCreateTime\": 1664515393, \"reqToUserName\": \"ww4ddb472180ea\", \"reqFromUserName\": \"adea\"}]"

Takitooru · 发表于 2022-10-1 11:16

压缩包
下载:https://takitooru.lanzouy.com/imzZW0cqauuj 密码:d0ru

GIF效果演示图

核心代码

 $(document).ready(function () {
                $.ajax({
                    url: 'testjson.json',
                    type: 'get',
                    dataType: 'json',
                    success: function(datas){
                        var tbhtml = "<tr><th>reqMsgType</th><th>reqFromUserName</th><th>reqCreateTime</th><th>reqMsgType</th></tr>";
                        for(var i = 0;i<datas.length;i++){
                                tbhtml+="<tr><td>"+datas[i].reqMsgType+"</td><td>"+datas[i].reqFromUserName+"</td><td>"+datas[i].reqCreateTime+"</td><td>"+datas[i].reqMsgType+"</td></tr>";
                        }
                        $('table:eq(0)').html(tbhtml);
                        //console.log(datas);
                    }
                });
        });

w52110 · 发表于 2022-10-1 15:02

Takitooru 发表于 2022-10-1 12:48
压缩包
下载:https://takitooru.lanzouy.com/imzZW0cqauuj 密码:d0ru

太感谢了多问一句表格加个标题头这么写能显示但是编辑框左边打x了

Takitooru · 发表于 2022-10-1 16:33

w52110 发表于 2022-10-1 15:02
太感谢了多问一句表格加个标题头这么写能显示但是编辑框左边打x了

caption标签必须直接放置到table标签之后，即在table内。

<table>
  <caption>信息表</caption>
</table>

w52110 · 发表于 2022-10-2 22:47

Takitooru 发表于 2022-10-1 16:33
caption标签必须直接放置到table标签之后，即在table内。

[md]```

那如果我返回的数组比较多不是4列是n列如何按照顺序自增列呢

Takitooru · 发表于 2022-10-3 01:12

w52110 发表于 2022-10-2 22:47
那如果我返回的数组比较多不是4列是n列如何按照顺序自增列呢

返回多少数据，也是按照get到的数据来解析

w52110 · 发表于 2022-10-3 08:26

Takitooru 发表于 2022-10-3 01:12
返回多少数据，也是按照get到的数据来解析

get到的数据是部署在家里的数据
比如获取到5列获取到n列当字段名未知时怎么处理

Takitooru · 发表于 2022-10-3 09:59

w52110 发表于 2022-10-3 08:26
get到的数据是部署在家里的数据
比如获取到5列获取到n列当字段名未知时怎么处理

这跟数据部署在哪里没关系，
另外什么5列又n列？？你说的是 5列n行是吧？？
你要分清楚是【行】还是【列】列是th ，行是trtd。
你所说的未知字段是不是指列表头th？如果json数据当中包括有th表头数据，直接按照返回的数据分析然后作处理，没有自动增列一说，都是看返回的数据格式，然后根据数据类型用js解析后再动态创建表格。

w52110 · 发表于 2022-10-3 10:23

JSON获取的列是不固定的比如datas[i].reqMsgType中
reqMsgType字段在获取前是未知的
行的事情上面代码已经解决了

w52110 · 发表于 2022-10-3 22:49

Takitooru 发表于 2022-10-3 09:59
这跟数据部署在哪里没关系，
另外什么5列又n列？？你说的是 5列n行是吧？？
你要分清楚是【行】还是【 ...

JSON获取的列是不固定的比如datas.reqMsgType中
reqMsgType字段在获取前是未知的
行的事情上面代码已经解决了

帐号		自动登录	找回密码
密码			注册[Register]

[求助] 请求帮忙修改一下这段代码

最佳答案