使用普通javascript将.json数据添加到表中
使用普通javascript将.json数据添加到表中
提问于 2018-10-06 02:29:00
我想用普通的javascript (没有jquery)将json数据添加到HTML中的表中，我该怎么做呢？您将在下面找到html代码和json数据：
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}#myInput {
background-image: url("/css/searchicon.png"); /* Add a search icon to input */
background-position: 10px 12px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 100%; /* Full-width */
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
#myTable {
border-collapse: collapse; /* Collapse borders */
width: 100%; /* Full-width */
border: 1px solid #ddd; /* Add a grey border */
font-size: 18px; /* Increase font-size */
}
#myTable th,
#myTable td {
text-align: left; /* Left-align text */
padding: 12px; /* Add padding */
}
#myTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:10%;">Picture</th>
<th style="width:15%;">Name</th>
<th style="width:5%;">Age</th>
<th style="width:5%;">Active</th>
<th style="width:20%;">Email</th>
<th style="width:20%;">Phone</th>
<th style="width:10%;">Company</th>
<th style="width:10%;">Balance</th>
</tr>
<tr>
<td><img src="http://placehold.it/32x32" alt=""></td>
<td>Joseph Keller</td>
<td>24</td>
<td>true</td>
<td>josephkeller@twiist.com</td>
<td>+1 (827) 592-2357</td>
<td>TWIIST</td>
<td>$3,507.97</td>
</tr>
</table>
</body>
<script src="./assets/js/main.js"></script>
</html>
下面是我希望在表格中显示的json数据的一部分：
[
{
"_id": "5af5cf0270d455a211200d4c",
"isActive": true,
"balance": "$3,507.97",
"picture": "http://placehold.it/32x32",
"age": 24,
"eyeColor": "brown",
"name": "Joseph Keller",
"gender": "male",
"company": "TWIIST",
"email": "josephkeller@twiist.com",
"phone": "+1 (827) 592-2357",
"address": "661 Terrace Place, Elliott, Ohio, 9927",
"about": "Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.\r\n",
"registered": "2014-12-10T07:18:10 +02:00",
"latitude": -84.359436,
"longitude": 156.008804,
"tags": [
"excepteur",
"eiusmod",
"laboris",
"fugiat",
"minim",
"dolor",
"qui"
],
"friends": [
{
"id": 0,
"name": "Shields Terrell"
},
{
"id": 1,
"name": "Hilary Bruce"
},
{
"id": 2,
"name": "Lorraine Torres"
}
]
}有人能帮帮忙吗？我想知道如何使用vanilla javascript来做这件事
谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52671410
复制相关文章
相似问题