2012-08-02 136 views
1

我已通过Web服务调用访问JSON数据并解析了JSON数据。我想知道如何在HTML表格中打印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文件中,则该表应该可以灵活地更改。第一步是我必须以表格格式显示细节。

有谁请帮助环聊这个东西...在此先感谢...

+0

http://api.jquery.com/jQuery.getJSON/使用本教程 – 2012-08-02 10:40:55

回答

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

    }); 
}); 
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可变准备与内容。将其打印在需要的位置。

+0

就是这样未jQuery的.... – thenetimp 2012-08-02 10:45:29

+0

@thenetimp我知道,如果编码器没有任何想法,如何以html格式显示变量值,那么我必须给出一些简单的想法,而不是复杂的jquery方法符号。 – 2012-08-02 10:48:48

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>