如何添加动态表值

我有一个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" 
    } 
]

来源

2017-05-04 David

不知道这是否是一个错字，但你调用'foo'没有URL。 –

我没有看到id =“choose”的任何元素！ –

@SouhailBenSlimene“选择”是div是放在桌子里面的:) – David

如果你让你的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); 
    } 
    }

来源

2017-05-04 11:18:43

如果你打算在使用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); 
    }); 
}

来源

2017-05-04 11:21:30

你可以不喜欢它，我只是想创建自己的情况。希望它会有所帮助。

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>

来源

2017-05-04 11:21:37

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>

来源

2017-05-04 11:37:53

如何添加动态表值

回答

相关问题