如何显示从文件读取的多行循环的html表
我试图将json响应显示到html表中。其中一个字段是我希望在表中显示的图像。我当前的代码只显示json响应中的最后一个键/值，而不是表中的所有键/值如何显示从文件读取的多行循环的html表,html,json,Html,Json,我试图将json响应显示到html表中。其中一个字段是我希望在表中显示的图像。我当前的代码只显示json响应中的最后一个键/值，而不是表中的所有键/值 <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <link rel="stylesheet" type="text/css" href="http://www.tutorialsp
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="http://www.tutorialspoint.com/scripts/style.css" />
<script type="application/javascript">
function loadJSON()
{
var http_request = new XMLHttpRequest();
var data_file = "/vcaWS/api/sources";
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
for(var i=0;i<jsonObj.length;i++){
document.getElementById("title").innerHTML = jsonObj[i].title;
document.getElementById("logo_sm").innerHTML = jsonObj[i].logo_sm;
}
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
<title>Test JSON</title>
</head>
<body style="width:960px">
<h1>Test JSON</h1>
<table class="src">
<tr><th>Title</th><th>Logo_Small</th></tr>
<tr>
<td><div id="title">Youtube</div></td>
<td><div id="logo_sm">Youtube</div></td>
</tr>
</table>
<div class="central">
<button type="button" onclick="loadJSON();">JSON Store </button>
</body>
</html>
var rows = '';
for(var i=0;i<jsonObj.length;i++){
rows += '<tr><td class="title">' + jsonObj[i].title + '</td><td class="logo_sm">' + jsonObj[i].logo_sm + '</td></tr>';
}
document.getElementsByTagName('table')[0].innerHTML += rows;
另外，我希望将jpg文件显示为图像。目前，它是html表中显示的文本值。这将在表中添加JSON数据作为新行
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="http://www.tutorialspoint.com/scripts/style.css" />
<script type="application/javascript">
function loadJSON()
{
var http_request = new XMLHttpRequest();
var data_file = "/vcaWS/api/sources";
http_request.onreadystatechange = function(){
if (http_request.readyState == 4 )
{
// Javascript function JSON.parse to parse JSON data
var jsonObj = JSON.parse(http_request.responseText);
for(var i=0;i<jsonObj.length;i++){
document.getElementById("title").innerHTML = jsonObj[i].title;
document.getElementById("logo_sm").innerHTML = jsonObj[i].logo_sm;
}
}
}
http_request.open("GET", data_file, true);
http_request.send();
}
</script>
<title>Test JSON</title>
</head>
<body style="width:960px">
<h1>Test JSON</h1>
<table class="src">
<tr><th>Title</th><th>Logo_Small</th></tr>
<tr>
<td><div id="title">Youtube</div></td>
<td><div id="logo_sm">Youtube</div></td>
</tr>
</table>
<div class="central">
<button type="button" onclick="loadJSON();">JSON Store </button>
</body>
</html>
var rows = '';
for(var i=0;i<jsonObj.length;i++){
rows += '<tr><td class="title">' + jsonObj[i].title + '</td><td class="logo_sm">' + jsonObj[i].logo_sm + '</td></tr>';
}
document.getElementsByTagName('table')[0].innerHTML += rows;
var行=“”；
对于（var i=0；i您正在迭代JSON对象，但在每次迭代中，您将用第i个对象替换行的innerHTML。
因此，它将只显示JSON对象的最后一项。
只需获取表格并为每个项目插入一行即可。
var mytable = document.getElementById("tableid");
for(var i=0;i<jsonObj.length;i++){
var myrow = mytable.insertRow(0);
var mytitlecell = myrow.insertCell(0);
var mylogocell = myrow.insertCell(1);
mytitlecell.innerHTML = jsonObj[i].title;
mylogocell.innerHTML = "<img src='"+jsonObj[i].logo_sm+"'/>";
}
var mytable=document.getElementById（“tableid”）；
对于（var i=0；我想添加到表中，还是完全替换表中的内容？我想将其添加到表中。基本上，尝试使用标题Logo_sm的格式，下面有3行。将有4行：原始HTML中的1行，加上JSON中的3行。请参阅我的答案。谢谢……它现在可以按预期获取数据了……可以吗显示logo_sm，它是一个指向图像的链接，可直接在表格中显示该图像？您可以使用HTML表达任何内容。