1

Webサービス呼び出しを介してJSONデータにアクセスし、JSONデータを解析しました。そのJSONデータをHTMLテーブルに出力する方法を知りたいですか？

<!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ファイル手段に追加される場合、テーブルは柔軟に変更できる必要があります。最初のステップは、詳細を表形式で表示する必要があることです。

誰かがこのことで助けてください...事前に感謝します...

4

3 に答える 3

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>");

    });
});
于 2012-08-02T10:41:56.550 に答える
0

これを試してみてください

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

outpur 変数がコンテンツで準備ができているとき。希望の場所に印刷してください。

于 2012-08-02T10:42:30.830 に答える
0

これは、各ループでこれを行う基本的な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>

于 2012-08-02T10:44:20.543 に答える