gpt4 book ai didi

javascript - 为json对象创建动态表

转载 作者:行者123 更新时间:2023-12-02 16:17:38 25 4
gpt4 key购买 nike

这里我有一个 json 对象,列表中包含一些元素,所以我想为该对象创建一个动态表,这意味着如果我生成一个新的 json 对象,该表将在稍后刷新。但现在,我无法将 json 对象列表发送到表中,不知道为什么。我是 json 新手,谢谢。

<html>
<head>
<title>Generate your own query</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('result.json', function(jd) {
$('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>');
$('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>');

var table = document.getElementById("usertable");
var tabledata = "";
for(i=0;i<jd.list_of_queries.length;i++){
tabledata += "<tr>";
tabledata += "<td>" + jd.list_of_queries[i].query_id += "</td>";
tabledata += "<td>" + jd.list_of_queries[i].query_status += "</td>";
tabledata += "</tr>";
}
tabledata.innerHTML= tabledata;
); //.appendTo('#records_table');
console.log($tr.wrap('<p>').html());
});
});

});
});
});
</script>
</head>
<body>
<p>Generate your own query</p>
<div id="stage" >
Query <input type="text" name="query" size="50">
</div>
</br>
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>query_id</th>
<th>query_status</th>
</tr>
</tbody>
</table>
</br>

<input type="button" id="driver" value="submit query" />
<form>
<input type="submit" id="submit" value="go back"formaction="http://localhost/queryexample.html" >
</form>

结果.json

{
"queries_status": "under process",
"list_of_queries":
[
{
"query_id": 1,
"query_status": "under finished",
"query_results number": "2",
"detailed query results" :
[
{ "result 1":"string 1" },
{ "result 2":"string 2" }
],
"tasks_number" : 3,
"list of tasks":
[
{
"task id" :1,
"task status": "finished",
"task operation": "JOIN",
"number of hits": 4,
"finished hits":4,
"task result number": "5"
},
{
"task id" :2,
"task status": "finished",
"task operation": "SELECT",
"number of hits": 5,
"finished hits":5,
"task result number": "3"
},
{
"task id" :3,
"task status": "finished",
"task operation": "GROUPBY",
"number of hits": 5,
"finished hits":5,
"task result number": 2
}
]
},
{
"query id": 2,
"query status": "under process",
"query results number": null,
"detailed query results":
[
null
],
"tasks number" : 2,
"list of tasks":
[
{
"task id" :1,
"task status": "finished",
"task operation": "JOIN",
"number of hits": 4,
"finished hits":3,
"task result number": "5"
},
{
"task id" :2,
"task status": "under process",
"task operation": "GROUPBY",
"number of hits": 5,
"finished hits":0,
"task result number": "null"
}
]
}
]
}

最佳答案

那个摆弄示例(除了 getJson 我使用 html 解析进行可视化测试):http://jsfiddle.net/Lpj5203v/2/

你的回答是:首先 - 你的 json 结果有错误,看看:

"query id": 2,
"query status": "under process",
"query results number": null,

jd.list_of_queries[1] - 你错过了哈希键中的“_”。

带有答案的 JavaScript:

<script type='text/javascript'>
$(document).ready(function() {
$("#driver").click(function(){
$.getJSON('result.json', function(jd) {
$('#stage').append('<p> Queries: ' + jd.queries_status+ '</p>');
$('#stage').append('<p> Queries: ' + jd.list_of_queries[0].query_id+ '</p>');
var $tbody = $("#usertable tbody");
var tabledata = "";
for(var i = 0; i < jd.list_of_queries.length; i++ ){
tabledata = "";
tabledata += "<tr>";
tabledata += "<td>" + jd.list_of_queries[i].query_id + "</td>";
tabledata += "<td>" + jd.list_of_queries[i].query_status + "</td>";
tabledata += "</tr>";
$tbody.append(tabledata);
}
});
});
});
</script>

我还将您的 html 修复为有效:

<p>Generate your own query</p>
<div id="stage">
Query <input type="text" name="query" size="50" />
</div>
<br />
<table id="usertable" border="1" cellpadding="5" cellspacing='0'>
<thead>
<tr>
<th>query_id</th>
<th>query_status</th>
</tr>
</thead>
<tbody></tbody>
</table>
<br />

记住:

  • 不是</br> ,但是<br />
  • 始终关闭inputimg标签 <input /> <img />
  • 表结构为:

    <table>
    <thead>
    </thead>
    <tbody>
    </tbody>
    </table>

附注另外,你在 js、html、json 中有很多语法错误 - 尝试更加注意你的错误控制台日志

P.P.S

a += b 

同样

a = a + b

但是a += a + b += c - 是语法错误!

关于javascript - 为json对象创建动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29433082/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com