如何添加動態表值

Question

我有一個HTML，我正在顯示這樣的值。

<table id="myTable"> 
    <tr class="header"></tr> 
    <tr><td>Germany</td></tr> 
    <tr><td>Sweden</td></tr> 
    <tr><td>UK</td></tr> 
    <tr><td>Germany</td></tr> 
    <tr><td>Canada</td></tr> 
    <tr><td>Italy</td></tr> 
    <tr><td>UK</td></tr> 
    <tr><td>France</td></tr> 
</table> 

現在我想表依賴JSON值。所以爲此，我正在寫函數下面，但不知道爲什麼不幸運。我想將這些JSON值添加到我的表中。表格應該是動態的。另外url也是動態的。

function foo(myURL,callback) { 
     var httpRequest = new XMLHttpRequest(); 
     httpRequest.open('GET', myURL,true); 
     httpRequest.onreadystatechange = function() { 
      if(httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) { 
       // trigger your callback function 
       callback(httpRequest.responseText); 
      } 
     }; 
     httpRequest.send(); 
    } 

    foo(function(data) { 
     var jsonc = JSON.parse(data); 
     var new_opt=""; 
     for(i=0;i<jsonc.length;i++) 
     { 
      new_opt+='<td>'+jsonc[i]['VALUE']+'</td>'; 
     } 
     document.getElementById('choose').innerHTML =new_opt; 
    }); 

我的JSON

[ 
    { 
     "ID" : 0, 
     "VALUE" : "United State" 
    },{ 
     "ID" : 1, 
     "VALUE" : "United Kingdom" 
    },{ 
     "ID" : 2, 
     "VALUE" : "Afghanistan" 
    },{ 
     "ID" : 3, 
     "VALUE" : "Aland Islands" 
    },{ 
     "ID" : 4, 
     "VALUE" : "Albania" 
    } 
] 

Answer 1

如果你讓你的JSON值，則可以做到這一點，

var obj = JSON.parse(data); 
$("#myTable tbody tr").remove(); 
makeTableFromJson(obj); 

功能makeTableFromJson（數據）

function makeTableFromJson(data) { 
for (var i = 0; i < data.length; i++) { 
    var tr = $("<tr>"); 
    var td = $("<td>"); 
    td.append(i + 1); 
    var td0 = $("<td>"); 
    td0.append(data[i]['jsonVal']); 
    var td1 = $("<td>"); 
    td1.append(data[i]['jsonVal']); 
    var td2 = $("<td>"); 
    td2.append(data[i]['jsonVal']); 
    var td3 = $("<td>"); 
    td3.append(data[i]['jsonVal']); 
    var td4 = $("<td>"); 

    tr.append(td); 
    tr.append(td0); 
    tr.append(td1); 
    tr.append(td2); 
    tr.append(td3); 
    tr.append(td4); 

    $("#myTable tbody").append(tr); 
    } 
    } 

Answer 2

如果你打算在使用jQuery，你可以做到這一點通過以下方式：

function foo(str) { 
    var array = JSON.parse(str); 
    $.each(array,function(i,obj){ 
     var $tr = $("<tr>").append($("<td>").text(obj.VALUE)).attr("id", obj.ID); 
     $("#myTable > tbody").append($tr); 
    }); 
} 

Answer 3

你可以不喜歡它，我只是想創建自己的情況。希望它會有所幫助。

var data = [{ 
 
     "ID" : 0, 
 
     "VALUE" : "United State" 
 
    },{ 
 
     "ID" : 1, 
 
     "VALUE" : "United Kingdom" 
 
    },{ 
 
     "ID" : 2, 
 
     "VALUE" : "Afghanistan" 
 
    },{ 
 
     "ID" : 3, 
 
     "VALUE" : "Aland Islands" 
 
    },{ 
 
     "ID" : 4, 
 
     "VALUE" : "Albania" 
 
    } 
 
]; 
 
foo(data); 
 

 
function foo (data) 
 
{ 
 
\t \t \t \t 
 
     var new_opt=""; 
 
     for(var i=0;i<data.length;i++) 
 
     { 
 
      new_opt+='<tr><td>'+data[i]['VALUE']+'</td></tr>'; 
 
     } 
 
     document.getElementById('choose').innerHTML = new_opt; 
 
}

<table id="choose"> 
 
    <tr class="header" ></tr> 
 
    <tr><td>Germany</td></tr> 
 
    <tr><td>Sweden</td></tr> 
 
    <tr><td>UK</td></tr> 
 
    <tr><td>Germany</td></tr> 
 
    <tr><td>Canada</td></tr> 
 
    <tr><td>Italy</td></tr> 
 
    <tr><td>UK</td></tr> 
 
    <tr><td>France</td></tr> 
 
</table>

Answer 4

foo(function(data){ 
 
var table = document.createElement("TABLE"); 
 
    table.border = "1"; 
 
    
 
    
 
    
 
    //Add the header row. 
 
    var row = table.insertRow(-1); 
 
    var headerCell = document.createElement("TH"); 
 
    headerCell.innerHTML = "Countries"; 
 
    row.appendChild(headerCell); 
 
    
 
    
 
    //Add the data rows. 
 
    for (var i = 1; i < jsonc.length; i++) { 
 
      row = table.insertRow(-1); 
 
      var cell = row.insertCell(-1); 
 
      cell.innerHTML = jsonc[i]['VALUE']; 
 
    } 
 
    
 
    var dvTable = document.getElementById("dvTable"); 
 
    dvTable.innerHTML = ""; 
 
    dvTable.appendChild(table); 
 

 
});

<div id="dvTable"> 
 
</div>