时间戳

首页 > 解决方案 > 如何使用 Javascript 将解析的 JSON 转换为 html 表

javascript - 如何使用 Javascript 将解析的 JSON 转换为 html 表

问题描述

我不想在一行中打印出员工信息，而是使用变量“obj”来创建一个包含所有员工信息的 html 表。但是，我无法传入“obj”。请指教。

var text = '{"employees":[' + '{"Name":"Tony","Mobile":"99221111","Email":"tony@json.com" },' + '{"Name":"Linda","Mobile":"98981111","Email":"linda@json.com" },' + '{"Name":"Patrick","Email":"patrick@json.com" },' + '{"Name":"Isabella","Mobile":"99552222" }]}'; 
obj = JSON.parse(text);

function buildHtmlTable(selector) {
  var columns = addAllColumnHeaders(obj, selector);

  for (var i = 0; i < obj.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = obj[i][columns[colIndex]];
      if (cellValue == null) cellValue = "";
      row$.append($('<td/>').html(cellValue));
    }
    $(selector).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(obj, selector) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < obj.length; i++) {
    var rowHash = obj[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  $(selector).append(headerTr$);
<!DOCTYPE html>
<html>
<head>
	<title>Task 1</title>
</head>
<body onLoad="buildHtmlTable('#excelDataTable')">
  <table id="excelDataTable" border="1">
  </table>
	<p id="demo"></p>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src = "Task1ab.js"></script>
</body>
</html>

标签： javascripthtmlarraysjson

解决方案

请点击此链接：https ://www.encodedna.com/javascript/populate-json-data-to-html-table-using-javascript.htm 

<!DOCTYPE html>
    <html>
    <head>
        <title>Example</title>
        <style>
            th, td, p, input {
                font:14px;
            }
            table, th, td 
            {
                border: solid 1px #DDD;
                border-collapse: collapse;
            }
            th {
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <input type="button" onclick="CreateTable()" value="Create Table From JSON" />
        <p id="showData"></p>
    </body>

    <script>
        function CreateTable() {
            var employees = [
        {
          "Name": "Tony",
          "Mobile": "99221111",
          "Email": "tony@json.com"
        },
        {
          "Name": "Linda",
          "Mobile": "98981111",
          "Email": "linda@json.com"
        },
        {
          "Name": "Patrick",
          "Email": "patrick@json.com"
        },
        {
          "Name": "Isabella",
          "Mobile": "99552222"
        }
      ]

            // EXTRACT VALUE FOR HTML HEADER. 
            var col = [];
            for (var i = 0; i < employees.length; i++) {
                for (var key in employees[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1);                   // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th");      // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < employees.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    tabCell.innerHTML = employees[i][col[j]] ? employees[i][col[j]] : 'NA';
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }
    </script>
    </html>

推荐阅读