请求帮忙修改一下这段代码
比如 get 获取到的数据是这种json数组格式想实现一下条件
1、取消按钮 打开该页面直接就能看得到表格内容
2、现有的表单获取不到数据，请求高手帮忙修改下
<!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.reqMsgType+"</td><td>"+datas.reqFromUserName+"</td><td>"+datas.reqCreateTime+"</td><td>"+datas.reqMsgType+"</td></tr>";
}
$('table:eq(0)').html(tbhtml);
}
})
})
})
</script>
get到的json文本数组
"[{\"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\"}]"
压缩包
下载:https://takitooru.lanzouy.com/imzZW0cqauuj 密码:d0ru
GIF效果演示图
https://img1.imgtp.com/2022/10/01/5C5ym2gc.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.reqMsgType+"</td><td>"+datas.reqFromUserName+"</td><td>"+datas.reqCreateTime+"</td><td>"+datas.reqMsgType+"</td></tr>";
}
$('table:eq(0)').html(tbhtml);
//console.log(datas);
}
});
});
``` Takitooru 发表于 2022-10-1 12:48
压缩包
下载:https://takitooru.lanzouy.com/imzZW0cqauuj 密码:d0ru
太感谢了 多问一句 表格加个标题头 这么写 能显示 但是编辑框左边打x了
w52110 发表于 2022-10-1 15:02
太感谢了 多问一句 表格加个标题头 这么写 能显示 但是编辑框左边打x了
caption标签必须直接放置到table标签之后，即在table内。
```
<table>
<caption>信息表</caption>
</table>
``` Takitooru 发表于 2022-10-1 16:33
caption标签必须直接放置到table标签之后，即在table内。
```
那如果我返回的数组比较多 不是4列 是n列 如何按照顺序自增列呢 w52110 发表于 2022-10-2 22:47
那如果我返回的数组比较多 不是4列 是n列 如何按照顺序自增列呢
返回多少数据，也是按照get到的数据来解析 Takitooru 发表于 2022-10-3 01:12
返回多少数据，也是按照get到的数据来解析
get到的数据是部署在家里的数据
比如获取到5列 获取到n列 当字段名未知时 怎么处理 w52110 发表于 2022-10-3 08:26
get到的数据是部署在家里的数据
比如获取到5列 获取到n列 当字段名未知时 怎么处理
这跟数据部署在哪里没关系，
另外什么5列又n列？？你说的是5列n行是吧？？
你要分清楚是【行】还是【列】列是th， 行是trtd。
你所说的未知字段是不是指列表头th？如果json数据当中包括有th表头数据，直接按照返回的数据分析然后作处理，没有自动增列一说，都是看返回的数据格式，然后根据数据类型用js解析后再动态创建表格。 JSON获取的列是不固定的 比如datas.reqMsgType中
reqMsgType字段在获取前是未知的
行的事情上面代码已经解决了 Takitooru 发表于 2022-10-3 09:59
这跟数据部署在哪里没关系，
另外什么5列又n列？？你说的是5列n行是吧？？
你要分清楚是【行】还是【 ...
JSON获取的列是不固定的 比如datas.reqMsgType中
reqMsgType字段在获取前是未知的
行的事情上面代码已经解决了
页:
[1]