如何基于 JSON 创建 HTML 表 [关闭]

Question

我需要根据JSON 输入创建HTML 表。这是我的JSON 示例输入。

[
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "sac@gmail.com"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "Binu@gmail.com"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "cal@gmail.com"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "nera@gmail.com"
  }
]

预期结果：

我需要在网页加载时执行此操作。

Answer 1

遍历 JSON 数组中的所有元素，并将所有不同的键保存到 javascript 数组或类似数组中。

然后，使用所有这些键创建带有列的表格和表格标题行。

然后，遍历所有 JSON 对象并为每个对象打印一行。

var data = [
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "sac@gmail.com"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "Binu@gmail.com"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "cal@gmail.com"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "nera@gmail.com"
  }
];

var keys = [];

document.write("<table border==\"1\"><tr>");
for (key in data[0]) {
	document.write('<td>' + key + '</td>');
}
document.write("</tr>");
for (var i = 0; i < data.length; i++) {
	document.write('<tr>');
	for (key in data[i]) {
  	document.write('<td>' + data[i][key] + '</td>');
  }
	document.write('</tr>');
}
document.write("</table>");

Answer 2

你不知道，我已经完成了你的工作。请按照我下面的代码并更改您在应用程序中需要的内容。但是您应该包含由您的服务器托管的库文件以获得更快的结果：：

完整代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var data = [
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "sac@gmail.com"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "Binu@gmail.com"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "cal@gmail.com"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "nera@gmail.com"
  }
];
$(document).ready(function () {
    var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;
    $.each(data[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data, function(index, value){
         html += '<tr>';
        $.each(value, function(index2, value2){
            html += '<td>'+value2+'</td>';
        });
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
});
</script>

它会如下图所示：

Answer 3

var data = jsonObject;
var table = document.createElement("table");
var tr = document.createElement("tr");
var thUserID = document.createElement("th");
var thUserName = document.createElement("th");
var thPassword = document.createElement("th");
var thCountry = document.createElement("th");
var thEmail = document.createElement("th");
thUserID.innerText = "userID";
thUserName.innerText = "userName";
thPassword.innerText = "password";
thCountry.innerText = "country";
thEmail.innerText = "email";
tr.appendChild(thUserID);
tr.appendChild(thUserName);
tr.appendChild(thPassword);
tr.appendChild(thCountry);
tr.appendChild(thEmail);    
for(var i=0; i<data.length; i++) {
    var userID = data[i].UserID;
    var userName = data[i].UserName;
    var password = data[i].Password;
    var country = data[i].Country;
    var email = data[i].Email;
    var tr = document.createElement("tr");
    var tdUserID = document.createElement("td");
    tdUserID.innerText = userID;
    var tdUserName = document.createElement("td");
    tdUserName.innerText = userName;
    var tdPassword = document.createElement("td");
    tdPassword.innerText = password;
    var tdCountry = document.createElement("td");
    tdCountry.innerText = country;
    var tdEmail = document.createElement("td");
    tdEmail.innerText = email;
    tr.appendChild(tdUserID);
    tr.appendChild(tdUserName);
    tr.appendChild(tdPassword);
    tr.appendChild(tdCountry);
    tr.appendChild(tdEmail);
    table.appendChild(tr);
}
document.body.appendChild(table);

Answer 4

这就是我会做的

var object = [
  {
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "sac@gmail.com"
  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "Binu@gmail.com"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "cal@gmail.com"
  },
  {
    "UserID": 4,
    "UserName": "nera",
    "Password": "1234",
    "Country": "uk",
    "Email": "nera@gmail.com"
  }
];


function createTable(){
	$('#content').append('<table id="jsonTable"><thead><tr></tr></thead><tbody></tbody></table>');
	
  $.each(Object.keys(object[0]), function(index, key){
    $('#jsonTable thead tr').append('<th>' + key + '</th>');
  });	
  $.each(object, function(index, jsonObject){     
    if(Object.keys(jsonObject).length > 0){
      var tableRow = '<tr>';
      $.each(Object.keys(jsonObject), function(i, key){
         tableRow += '<td>' + jsonObject[key] + '</td>';
      });
      tableRow += "</tr>";
      $('#jsonTable tbody').append(tableRow);
    }
	});
}

$(document).ready(function(){
  createTable();
});

tr:nth-child(even) td {background: #f2f2f2}

table{
	border-collapse: collapse;
}
table td, table th{
	border: 1px solid black;
  text-align: left;
}
table thead{
	background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content"></div>