Question

我正在尝试构建原始html文件，我将动态提供json：

以下是this fiddle中生成的代码：

var myList=[{"name" : "abc", "age" : 50},
            {"age" : "25", "hobby" : "swimming"},
            {"name" : "xyz", "hobby" : "programming"}];

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable() {
     var columns = addAllColumnHeaders(myList);

     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];

             if (cellValue == null) { cellValue = ""; }

             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
     }
 }

 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(myList)
 {
     var columnSet = [];
     var headerTr$ = $('<tr/>');

     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);

     return columnSet;
 }

我尝试创建了table.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="test-isla.css" type="text/css" />

</head>

<body>
<div id="back">
<div class="red" id="div1"></div>
<div class="red1" id="div2"></div>
<div class="red2" id="div3"></div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

       var myList=[{"name" : "abc", "age" : 50},
            {"age" : "25", "hobby" : "swimming"},
            {"name" : "xyz", "hobby" : "programming"}];

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable() {
     var columns = addAllColumnHeaders(myList);

     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];

             if (cellValue == null) { cellValue = ""; }

             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
     }
 }

 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(myList)
 {
     var columnSet = [];
     var headerTr$ = $('<tr/>');

     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);

     return columnSet;
 }
        });
</script>
</body>
</html>

问题是这个table.html没有向我显示正确的表格，任何人都可以指出我究竟是什么问题。我是html代码的新手。

答案： [编辑]

@Unihedron的答案是正确的唯一问题是输出打印2次为here

我刚刚替换下面的行

  function buildHtmlTable(myList) {

在@Unihedron代码中它起作用了!!!

Answer 1

使用jsfiddle，右键单击输出所在的“结果”框。在您的浏览器中使用“检查元素”（即使对于Internet Explorer也是如此，因此任何现代的都可以），它将为您提供所选元素的节点。

http://gyazo.com/16ea9ed731640e1b522d23fda62139e9.png

上升几个级别，直到找到#document签名，然后选择并复制它。对于您的代码，它将是：

<!DOCTYPE html><html hc="b3"><script type="text/javascript">window["_gaUserPrefs"] = { ioo : function() { return true; } }</script><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by manishmmulani</title>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script><style type="text/css"></style>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">


  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type="text/css">
    th {
    font-weight : bold
}
  </style>



<script type="text/javascript">//<![CDATA[ 

var myList=[{"name" : "abc", "age" : 50},
            {"age" : "25", "hobby" : "swimming"},
            {"name" : "xyz", "hobby" : "programming"}];

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable() {
     var columns = addAllColumnHeaders(myList);

     for (var i = 0 ; i < myList.length ; i++) {
         var row$ = $('<tr/>');
         for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) {
             var cellValue = myList[i][columns[colIndex]];

             if (cellValue == null) { cellValue = ""; }

             row$.append($('<td/>').html(cellValue));
         }
         $("#excelDataTable").append(row$);
     }
 }

 // Adds a header row to the table and returns the set of columns.
 // Need to do union of keys from all records as some records may not contain
 // all records
 function addAllColumnHeaders(myList)
 {
     var columnSet = [];
     var headerTr$ = $('<tr/>');

     for (var i = 0 ; i < myList.length ; i++) {
         var rowHash = myList[i];
         for (var key in rowHash) {
             if ($.inArray(key, columnSet) == -1){
                 columnSet.push(key);
                 headerTr$.append($('<th/>').html(key));
             }
         }
     }
     $("#excelDataTable").append(headerTr$);

     return columnSet;
 }
//]]>  

</script>


</head>
<body onload="buildHtmlTable()">

<table id="excelDataTable" border="1">
 <tbody><tr><th>name</th><th>age</th><th>hobby</th></tr><tr><td>abc</td><td>50</td><td></td></tr><tr><td></td><td>25</td><td>swimming</td></tr><tr><td>xyz</td><td></td><td>programming</td></tr></tbody></table>







</body></html>

我在哪里插入原始html中的jsfiddle代码

1 个答案: