将 json 转换为 html 表的 JavaScript 不起作用

Javascript to convert json to html table is not working

本文关键字：表的 JavaScript 不起作用 html json 转换      更新时间：2023-09-26

这是我尝试将一些 JSON 数据转换为 HTML 表的示例 js。 我将此 html 复制到我的桌面并双击它.但我什么也看不见。检查元素中也没有错误。我看不到任何输出。

<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>

你已经把js放在了头标签里。因此，何时解析div id="div1不可用。解决方案 1

 Put your code inside `$(document).ready(function(){`
  // your code here
 })

解决方案 2

将脚本标记放在关闭body标记附近

<body>
     // DOM
   <script>
    // your code
   </script>
   </body>

Jsfiddle with $（document）.ready（function（）{..}

将所有

代码包装在$(document).ready中，以便它们仅在页面加载后运行。

$(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); 
    }
});

除此之外，您的代码应该没问题。

    <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>
相关文章：