[英]adding .json data to table using vanilla javascript
我想使用普通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"
}
]
}
有人可以幫忙嗎？ 我想知道如何使用香草javascript
謝謝
我知道您的JSON很長，並且想要建立一個類似於HTML中的表格的表格。 在這種情況下，您可以嘗試以下操作：
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>
我不知道您是否解析了數據，所以我假設是這樣（如果沒有，那么如何解決的問題很多）。 在這里，我處理“已分析”對象，為數據插入新行。 注意，我確實離開了原始行，但是可以將其刪除或進行其他處理。
處理數據，克隆行並將數據放入行，然后將其添加到表中。
我把您的其他功能留在了，但不知道如何激活它們，所以它們現在就在那里。
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>
使用香草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)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.