Javascript to convert json to html table is not working
Question
this is my sample js trying to convert some json data to a html table . i copy this html to my desktop and double click it . But there is nothing i could see. there was no error in the inspect element also. i could not see any output.
<html>
<title>sample</title>
<style>
#mytable,td{
border:1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" charset="UTF-8">
var obj=[
{
id : "001",
name : "apple",
category : "fruit",
color : "red"
},
{
id : "002",
name : "melon",
category : "fruit",
color : "green"
},
{
id : "003",
name : "banana",
category : "fruit",
color : "yellow"
}
]
var tbl=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
var tr="<tr>";
var td1="<td>"+obj[i]["id"]+"</td>";
var td2="<td>"+obj[i]["name"]+"</td>";
var td3="<td>"+obj[i]["color"]+"</td></tr>";
$("#mytable").append(tr+td1+td2+td3);
}
</script>
<head></head>
<body>
<div id="div1">
</div>
</body>
</html>
3 answers
solution1
0 ACCPTED 2016-03-14 13:05:03
You have put the js inside the head tag. So when it will be parsed div id="div1 is not available. Solution 1
Put your code inside `$(document).ready(function(){`
// your code here
})
Solution 2
Put the script tag near closing body tag
<body>
// DOM
<script>
// your code
</script>
</body>
solution2
0 2016-03-14 13:05:38
Wrap all your code in $(document).ready so that they will only be run once the page is loaded.
$(document).ready(function()
var obj=[
{
id : "001",
name : "apple",
category : "fruit",
color : "red"
},
{
id : "002",
name : "melon",
category : "fruit",
color : "green"
},
{
id : "003",
name : "banana",
category : "fruit",
color : "yellow"
}
]
var tbl=$("<table/>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
var tr="<tr>";
var td1="<td>"+obj[i]["id"]+"</td>";
var td2="<td>"+obj[i]["name"]+"</td>";
var td3="<td>"+obj[i]["color"]+"</td></tr>";
$("#mytable").append(tr+td1+td2+td3);
}
});
Other than that, your code should be fine.
solution3
0 2016-03-14 13:17:21
<html>
<title>sample</title>
<style>
#mytable,td{
border:1px solid blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" charset="UTF-8"></script><!--You forgot to close script link here-->
<script><!--You forgot to open script tag here-->
$(document).ready(function(){
var obj=[
{
id : "001",
name : "apple",
category : "fruit",
color : "red"
},
{
id : "002",
name : "melon",
category : "fruit",
color : "green"
},
{
id : "003",
name : "banana",
category : "fruit",
color : "yellow"
}
]
var tbl = "<table>"
var content="";
for(i=0; i<obj.length;i++){
content += '<tr><td>' +obj[i]["id"]+ '</td></tr>';
}
content += "</table>"
$('#div1').append(content);
});
/*var tbl=$("<table>").attr("id","mytable");
$("#div1").append(tbl);
for(var i=0;i<obj.length;i++)
{
var tr="<tr>";
var td1="<td>"+obj[i]["id"]+"</td>";
var td2="<td>"+obj[i]["name"]+"</td>";
var td3="<td>"+obj[i]["color"]+"</td></tr>";
}
$("#mytable").append(tr+td1+td2+td3); */
</script>
<head></head>
<body>
<div id="div1">
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.