Question

我正在尝试JavaScript挑战但却陷入困境。要求不是修改除 app.js 之外的任何其他文件而没有库（即没有JQuery等）

以下是文件系统：

css
  bootstrap.min.css
image
  1.gif
  2.gif
  3.gif
  4.gif
  5.gif
js
  app.js
json
  data.js
sample.html

以下是 sample.html ：

<!doctype>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Only Pure JavaScript</h2>
  <div class="contents">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<script src="json/data.js"></script>
<script src="js/app.js"></script>
</body>
</html>

以下是 data.js ：

var sample_data = [
  {
    "id": "5",
    "name": "name #5",
    "thumbnailUrl": "image/5.gif",
    "price": 170
  },
  {
    "id": "1",
    "name": "name #1",
    "thumbnailUrl": "image/1.gif",
    "price": 170
  },
  {
    "id": "2",
    "name": "name #2",
    "thumbnailUrl": "image/2.gif",
    "price": 270
  },
  {
    "id": "8",
    "name": "name #8",
    "thumbnailUrl": "image/8.gif",
    "price": 70
  },
  {
    "id": "10",
    "name": "name #10",
    "thumbnailUrl": "image/10.gif",
    "price": 170
  },
]

这就是我目前在 app.js 中所拥有的：

var jsonFile = "json/data.js";
var len = sample_data.length;
// document.write('len: ' + len + "<br>");

var table = document.createElement('table');
var body = document.createElement('tbody');


for (var i = 0; i < len; i++) {
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var s = sample_data[i];

    document.write('id: ' + s.id + "<br>");

    td.innerHTML = s.id;
    tr.appendChild(td);

    td = document.createElement('td');
    document.write('name: ' + s.name + "<br>");
    td.innerHTML = s.name;
    tr.appendChild(td);

    td = document.createElement('td');
    document.write('thumbnailUrl: ' + s.thumbnailUrl + "<br>");
    td.innerHTML = s.thumbnailUrl;
    tr.appendChild(td);

    td = document.createElement('td');
    document.write('price: ' + s.price + "<br>");
    td.innerHTML = s.price;
    tr.appendChild(td);

    body.appendChild(tr);
}

table.appendChild(body);

我花了很多时间尝试了4种不同的方式，这个附加的是我能得到的最接近的方式（它与document.write正确显示）。说真的，没有任何库或html页面的变化，对我来说很难。任何帮助或指导信息的方向将不胜感激。请注意，只有 app.js 可以更改。

Answer 1

你真的需要document.write吗？如果您只需要它用于调试目的，请用简单的console.log替换它。

此外，您似乎不会将table元素附加到任何位置。在document.body.appendChild(table)的末尾添加app.js。

但是从您的sample.html我可以看到您已经有一个现有的TBODY元素，因此您很可能希望将值添加到该现有表中。

而不是做

var body = document.createElement('tbody');

您可以使用

引用现有元素

var body = document.getElementsByTagName('tbody')[0]

此时您可以完全删除table变量。

var jsonFile = "json/data.js";
var len = sample_data.length;
// document.write('len: ' + len + "<br>");

var body = document.getElementsByTagName('tbody')[0];


for (var i = 0; i < len; i++) {
    var tr = document.createElement('tr');
    var td = document.createElement('td');
    var s = sample_data[i];

    //console.log('id: ' + s.id);

    td.innerHTML = s.id;
    tr.appendChild(td);

    td = document.createElement('td');
    //console.log('name: ' + s.name);
    td.innerHTML = s.name;
    tr.appendChild(td);

    td = document.createElement('td');
    //console.log('thumbnailUrl: ' + s.thumbnailUrl);
    td.innerHTML = s.thumbnailUrl;
    tr.appendChild(td);

    td = document.createElement('td');
    //console.log('price: ' + s.price);
    td.innerHTML = s.price;
    tr.appendChild(td);

    body.appendChild(tr);
}

<!doctype>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Sample</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
  <h2>Only Pure JavaScript</h2>
  <div class="contents">
    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Image</th>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
<script>
var sample_data = [
  {
    "id": "5",
    "name": "name #5",
    "thumbnailUrl": "image/5.gif",
    "price": 170
  },
  {
    "id": "1",
    "name": "name #1",
    "thumbnailUrl": "image/1.gif",
    "price": 170
  },
  {
    "id": "2",
    "name": "name #2",
    "thumbnailUrl": "image/2.gif",
    "price": 270
  },
  {
    "id": "8",
    "name": "name #8",
    "thumbnailUrl": "image/8.gif",
    "price": 70
  },
  {
    "id": "10",
    "name": "name #10",
    "thumbnailUrl": "image/10.gif",
    "price": 170
  },
]
</script>
<script src="js/app.js"></script>
</body>
</html>

Answer 2

window.onload = function()是Javascript，而不是JSON。要加载它，请创建一个指向它的data.js元素。

行后：

<script>

放线：

var jsonFile = "json/data.js";

使用纯JavaScript加载外部JSON数据

2 个答案: