Question

当我尝试使用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/。请注意我是如何将JavaScript包含在head标记中的：

这是怎么回事：您将<script>标记放在文档的头部。因此，脚本运行并尝试在页面加载完成之前操作DOM（即DOM可能还没有准备好）。

您应该将代码包装在$(document).ready内（或等效的内容...阅读this answer），或将<script>标记放在页面的最底部（但在<body>代码）。

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

1 个答案: