Question

我通过Web服务调用访问了JSON数据并解析了JSON数据。我想知道如何在HTML表格中打印JSON数据???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File Download</title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

    function jsonparser1() {
        $.ajax({
            type: "GET",
            crossDomain: true,
            url: "http://10.211.2.219:8080/JerseyWebService/rest/sample/files",
            dataType: "jsonp",
            success: function (res) {
                $.each(res['data'], function (i, row) {
                    var ftime = row['time'];
                    var fname = row['name'];
                    var fhref = row['href'];

                    document.myform.???????????????=ftime;
                    ??????????????????????????????????????
                    ??????????????????????????????????????  
                })
            },

            error: function (xml) {
                alert(xml.status + ' ' + xml.statusText);
            }
        });
    }        
</script>    
</head>
<body>
<form name="myform">
    <input type="button" name="clickme" value="Click here to display the details of the files" onclick=jsonparser1() />
    ??????????????????????????????????????????
    ??????????????????????????????????????????     
</form>
</body>
</html>

我使用的JSON数据是：

{"data":[{"id":13,"time":"02-08-2012 3:24:45 PM","name":"jersey-multipart-1.0.3.144640.jar","href":"file://chndlf716168/TempUp/1343901285087-FileName-jersey-multipart-1.0.3.144640.jar"},{"id":14,"time":"02-08-2012 3:36:0 PM","name":"icloud_hero.png.png","href":"file://chndlf716168/TempUp/1343901960304-FileName-icloud_hero.png.png"}],"code":true}

我想以表格格式显示时间，名称和href属性。 href应该是锚标记。如果将更多数量的数据附加到JSON文件中，则该表应该可以灵活地进行更改。第一步是我必须以表格格式显示细节。

任何人请帮忙解决这个问题......提前谢谢......

Answer 1

希望这会有所帮助：

$("document").ready(function() {
    $.getJSON("http://localhost:1909/encoders", function(data) {

        $("#div-my-table").text("<table>");

        $.each(data, function(i, item) {
            $("#div-my-table").append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>");
        });

        $("#div-my-table").append("</table>");

    });
});

Answer 2

试试这个

var output = "<table>";
    $.each(res['data'], function (i, row) {                     
        var ftime = row['time'];                     
        var fname = row['name'];                     
        var fhref = row['href'];
        output+="<tr><td>VARIABLE VALUE</td></tr>";
        })
output += "</table>";

输出变量准备好内容时。将其打印在所需位置。

Answer 3

这是每个循环中的基本jquery。

$row = $('<tr></tr>');
$row.append('<td>' + somedata + '</td>');
// repeat the above line for each data item
$('#mytable).append($row);

在您的HTML中创建<table id="mytable"></table>

如何在表中的HTML页面中打印已解析的JSON数据

3 个答案: