將json轉換爲html表格的Javascript無法正常工作

-1

這是我的js示例，試圖將一些json數據轉換爲html表格。我將這個html複製到我的桌面並雙擊它。但我沒有看到任何東西。檢查元素也沒有錯誤。我看不到任何輸出。將json轉換爲html表格的Javascript無法正常工作

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

來源

2016-03-14 vds

腳本運行時，$（「＃div1」）'不存在。您需要將腳本包裝在['（$（document）.ready（）']（https://api.jquery.com/ready/）中，或將腳本移動到文檔底部 – Turnip

[大寫1。人sg代詞]（http://english.stackexchange.com/q/172）; – SmokeDispenser

您已將js放在head標籤內。所以當它被解析時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(){..}

來源

2016-03-14 13:05:03 brk

總結所有的代碼在$(document).ready即T嘿只會在頁面加載後運行。

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

    } 
});

除此之外，你的代碼應該沒問題。

來源

2016-03-14 13:05:38 chris97ong

@Turnip哦，我明白了，編輯了我的帖子 – chris97ong

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

來源

2016-03-14 13:17:21 Arokiyanathan

將json轉換爲html表格的Javascript無法正常工作

回答

相關問題