文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用普通javascript将.json数据添加到表中

问使用普通javascript将.json数据添加到表中
EN

Stack Overflow用户
提问于 2018-10-06 02:29:00
回答 2查看 887关注 0票数 1

我想用普通的javascript (没有jquery)将json数据添加到HTML中的表中，我该怎么做呢？您将在下面找到html代码和json数据：

​

代码语言：javascript
复制
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";
      }
    }
  }
}
代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<!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数据的一部分：

代码语言：javascript
复制
    [
  {
    "_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来做这件事

谢谢

javascript
html
json
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-10-06 02:55:42

我知道您有一个很长的JSON，并且您想要构建一个类似于HTML中的表。在这种情况下，您可以尝试这样做：

​

代码语言：javascript
复制
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";
      }
    }
  }
}
代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

    <table id="myTable"></table>

​

票数 2
EN

Stack Overflow用户

发布于 2018-10-06 03:27:58

我不知道你是否已经解析了你的数据，所以我假设你已经解析了(如果没有，还有很多关于如何做的问题)。在这里，我处理为数据插入新行的“已解析”对象。请注意，我确实保留了原始行，但可以将其删除或以其他方式处理。

处理数据，克隆行并将数据放入行，然后将其添加到表中。

我把你的其他功能留在里面了，但不知道如何激活它们，所以它们现在就在那里。

​

代码语言：javascript
复制
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();
})();
代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/52671410

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档