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值添加到我的表中。表应该是动态的。网址也是动态的。

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（data）

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

如何添加动态表值

4 个答案: