使用香草javascript将.json数据添加到表中
[英]adding .json data to table using vanilla javascript
问题描述
I want to add json data to the table in HTML using vanilla javascript (no jquery) how can I do that ? 
我想使用普通javascript（无jquery）将json数据添加到HTML中的表中，该怎么办？ below you will find the html code and the json data : 在下面，您将找到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>
and here is part of json data that I want to appear in table : 这是我想出现在表中的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"
}
]
}
can someone help ? 有人可以帮忙吗？ I want to know how to do it using vanilla javascript 我想知道如何使用香草javascript
thank you 谢谢
2 个解决方案
解决方案1
2 已采纳 2018-10-05 18:55:42
I understand that you have a long JSON and you want to build a table like the one in your HTML. 我知道您的JSON很长，并且想要建立一个类似于HTML中的表格的表格。 In this case you may try this: 在这种情况下，您可以尝试以下操作：
let 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" } ] } ] let _html = `<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>`; for(let i = 0; i < json.length; i++){ _html += `<tr> <td><img src="${json[i].picture}" /></td> <td>${json[i].name}</td> <td>${json[i].age}</td> <td>${json[i].isActive}</td> <td>${json[i].email}</td> <td>${json[i].tel}</td> <td>${json[i].company}</td> <td>${json[i].balance}</td> </tr>`; } myTable.innerHTML = _html; 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")[1]; 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; }
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <table id="myTable"></table>
解决方案2
0 2018-10-05 19:27:58
I do not know if you have parsed your data or not, so I assume so (if not there are tons of questions on how to do that). 我不知道您是否解析了数据，所以我假设是这样（如果没有，那么如何解决的问题很多）。 Here I process the "parsed" object inserting new rows for the data. 在这里，我处理“已分析”对象，为数据插入新行。 Note I did leave the original row but that could be removed or otherwise handled. 注意，我确实离开了原始行，但是可以将其删除或进行其他处理。
Process the data, clone the row and put data in the row, then add it to the table. 处理数据，克隆行并将数据放入行，然后将其添加到表中。
I left your other functions in but did not know how to activated those, so they are just there for now. 我把您的其他功能留在了，但不知道如何激活它们，所以它们现在就在那里。
var mythings = [{ "_id": "5af5cf0270d455a211200d4c", "isActive": true, "balance": "$3,507.97", "picture": "http://placehold.it/32x32", "age": 24, "eyeColor": "brown", "name": "Joseph Keller0", "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" } ] }, { "_id": "5af5cf0270d455a211200d4c", "isActive": true, "balance": "$3,507.97", "picture": "http://placehold.it/32x32", "age": 24, "eyeColor": "brown", "name": "Joseph Keller1", "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" } ] }]; function processMyThings() { // console.log(mythings.length); for (var m = 0; m < mythings.length; m++) { let rowdata = mythings[m]; // console.log(mythings[m].name); addNewRow(rowdata); } } function addNewRow(rdata) { let tableId = "myTable"; var table = document.getElementById(tableId); var clone = cloneRow(table); addDataToRow(clone, rdata); // clone.id = "newID"; // change id or other attributes/contents table.appendChild(clone); // add new row to end of table } function cloneRow(table) { var row = table.getElementsByClassName("row")[0]; var clone = row.cloneNode(true); return clone; } function addDataToRow(clone, rdata) { //var tds = clone.getElementsByTagName("td"); var image = clone.getElementsByClassName("rowimage")[0].getElementsByTagName('img'); image.src = rdata.picture; // clone.getElementsByClassName("rowimage")[0].appendChild(image); clone.getElementsByClassName("rowname")[0].innerHTML = rdata.name; clone.getElementsByClassName("rowage")[0].innerHTML = rdata.age; clone.getElementsByClassName("rowactive")[0].innerHTML = rdata.active; clone.getElementsByClassName("rowemail")[0].innerHTML = rdata.email; clone.getElementsByClassName("rowphone")[0].innerHTML = rdata.phone; clone.getElementsByClassName("rowcompany")[0].innerHTML = rdata.company; clone.getElementsByClassName("rowbalance")[0].innerHTML = rdata.balance; return clone; } function createRow() { var row = document.createElement('tr'); // create row node var col = document.createElement('td'); // create column node var col2 = document.createElement('td'); // create second column node row.appendChild(col); // append first column to row row.appendChild(col2); // append second column to row col.innerHTML = "qwe"; // put data in first column col2.innerHTML = "rty"; // put data in second column var table = document.getElementById("tableToModify"); // find table to append to table.appendChild(row); // append row to table } 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++) { // old: td = tr[i].getElementsByTagName("td")[0]; let td = tr[i].getElementsByClassName("rowname")[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } (function() { processMyThings(); })();
#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; }
<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 class="row"> <td class="rowimage"><img src="http://placehold.it/32x32" alt=""></td> <td class="rowname">Joseph Keller</td> <td class="rowage">24</td> <td class="rowactive">true</td> <td class="rowemail">josephkeller@twiist.com</td> <td class="rowphone">+1 (827) 592-2357</td> <td class="rowcompany">TWIIST</td> <td class="rowbalance">$3,507.97</td> </tr> </table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用香草JavaScript在表格中显示带有图像的嵌套json - Displaying the nested json with images in an table using vanilla javascript
如何使用 vanilla JavaScript 刷新 JSON 请求中的表行 - How to refresh a table row in a JSON request using vanilla JavaScript
动态删除复杂JSON数据中的空键（使用原始JavaScript） - Dynamically delete empty keys in complex JSON data (using vanilla JavaScript)
使用Vanilla JS向表中动态添加内容 - Dynamically adding content to table using Vanilla JS
用香草JavaScript重新整理json数据 - re-organize json data with vanilla javascript
使用原始JavaScript将JSON数据存储在变量中 - Store JSON data in a variable with vanilla JavaScript
通过 Vanilla Javascript 以模态加载 JSON 数据 - Loading JSON Data in Modal via Vanilla Javascript
在jQuery或Vanilla JavaScript中过滤JSON数据 - Filtering JSON data in jQuery or vanilla JavaScript
使用香草JS在html表格上显示JSON - display JSON on an html table using vanilla JS
使用香草JavaScript获取JSON API响应 - Get a JSON API response using vanilla javascript
相关标签