Question

如何使用 JavaScript 修改表格数据元素？

2016-04-14

64

javascript

当我尝试使用 JavaScript 通过 id 修改空表格数据元素时，遇到了一个问题。

由于某种原因， document.getElementById("tabledata").innerHTML = variable.property" 未更改 <td> 元素内的数据。当使用 jsfiddle 时，此代码似乎有效，但在本地，表格数据元素不会被 JS 修改。

JS

function Fish(name, breed, weight, sex) {
  this.name = name;
  this.breed = breed;
  this.weight = weight;
  this.sex = sex;
}

var jeremy = new Fish("Jeremy", "Salmon", 2.25, "Male");
var logan = new Fish("Logan", "Tuna", 3.48, "Male");
var stephanie = new Fish("Stephanie", "Bass", 5, "Female");
var emily = new Fish("Emily", "Catfish", 4.75, "Female");

document.getElementById("jeremyName").innerHTML = jeremy.name;
document.getElementById("jeremyBreed").innerHTML = jeremy.breed;
document.getElementById("jeremyWeight").innerHTML = jeremy.weight;
document.getElementById("jeremySex").innerHTML = jeremy.sex;
document.getElementById("loganName").innerHTML = logan.name;
document.getElementById("loganBreed").innerHTML = logan.breed;
document.getElementById("loganWeight").innerHTML = logan.weight;
document.getElementById("loganSex").innerHTML = logan.sex;
document.getElementById("stephanieName").innerHTML = stephanie.name;
document.getElementById("stephanieBreed").innerHTML = stephanie.breed;
document.getElementById("stephanieWeight").innerHTML = stephanie.weight;
document.getElementById("stephanieSex").innerHTML = stephanie.sex;
document.getElementById("emilyName").innerHTML = emily.name;
document.getElementById("emilyBreed").innerHTML = emily.breed;
document.getElementById("emilyWeight").innerHTML = emily.weight;
document.getElementById("emilySex").innerHTML = emily.sex;

HTML

<!DOCTYPE html>
<html>

  <head>
    <style>
      th {
        color: red;
      }

    </style>
    <script src="script.js"></script>
  </head>

  <body style="background-color: darkgray">
    <h1 style="text-align: center;font-size: 100px;">Fish in Captivity</h1>
    <table style="border: 2px solid black; border-collapse: collapse;width: 100%;font-size: 50px;">
      <caption>Fish</caption>
      <tr>
        <th>Name</th>
        <th>Breed</th>
        <th>Weight</th>
        <th>Sex</th>
      </tr>
      <tr>
        <td id="jeremyName"></td>
        <td id="jeremyBreed"></td>
        <td id="jeremyWeight"></td>
        <td id="jeremySex"></td>
      </tr>
      <tr>
        <td id="loganName"></td>
        <td id="loganBreed"></td>
        <td id="loganWeight"></td>
        <td id="loganSex"></td>
      </tr>
      <tr>
        <td id="stephanieName"></td>
        <td id="stephanieBreed"></td>
        <td id="stephanieWeight"></td>
        <td id="stephanieSex"></td>
      </tr>
      <tr>
        <td id="emilyName"></td>
        <td id="emilyBreed"></td>
        <td id="emilyWeight"></td>
        <td id="emilySex"></td>
      </tr>
    </table>
  </body>

</html>

Answer 1

错误可在此处查看： https://jsfiddle.net/4mtd7uun/ 。请注意我如何在 head 标签中包含 JavaScript，就像您所做的那样：

发生的情况是：您将 <script> 标签放在了文档的 head 中。因此，脚本会在页面加载完成之前运行并尝试操作 DOM（即 DOM 可能尚未准备好）。

您应该将代码包装在 $(document).ready 中（或等效内容......阅读这个答案），或者将您的 <script> 标签放在页面的最底部（但在 <body> 标签内）。