使用 javascript 更改 table td

Question

我是 Javascript 的新手，请放心。我想使用 javascript 更改 table 中的数据。我到处寻找 suitable 教程，但没有找到。这是我的代码。

function trans() {
  var table = document.getElementById("table");
  var row = table.getElementsByTagName("tr")[2];
  var td = row.getElementsByTagName("td")[0];

  td.innerHTML = "Julius";
}

**css**
table {
  width: 100%;
  border-collapse: collapse;
  font-family: calibri;
}
tr,
th,
td {
  border: 2px solid black;
  padding: 10px 10px 10px 10px;
}
thead {
  background-color: black;
  color: white;
}
tbody {
  background-color: white;
  color: black;
}
.center {
  text-align: center;
}
.caption {
  text-align: center;
}
button {
  background-color: blue;
  color: white;
  border-radius: 5px;
  height: 25px;
}

<html>

<body>
  <table id="table" title="Employment status verses Living Conditions">
    <caption>Employment status verses Living Conditions</caption>
    <thead>
      <tr>
        <th colspan="3" class="caption">Employment status verses Living Conditions</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>State</th>
        <th>Condition</th>
      </tr>
    </thead>
    <tr>
      <td>Antony</td>
      <td>Employed</td>
      <td>Poor</td>
    </tr>
    <tr>
      <td>Grace</td>
      <td>Student</td>
      <td>Wealthy</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Sponsored</td>
      <td>Self actualization</td>
    </tr>
    <tr>
      <td>Christine</td>
      <td colspan="2" class="center"><i>Unknown</i>
      </td>
    </tr>
    <tr>
      <td rowspan="2">James and John</td>
      <td>Fishermen</td>
      <td>Spiritual</td>
    </tr>
    <tr>
      <td>Brothers</td>
      <td>Disciples</td>
    </tr>
  </table>
  <button onclick="trans()">Change name</button>
</body>

</html>

当我运行代码时，它给我以下错误，

  {
  "message": "Uncaught TypeError: table.getElementByTagName is not a function",
  "filename": "http://stacksnippets.net/js",
  "lineno": 96,
  "colno": 15
}

我已将 getElementByTagName 更改为 getElementsByTagName 但它仍然给我一个错误，我的代码有什么问题以及我该如何解决它。找到我的 jsfiddle here

Answer 1

您在最后一行代码中缺少 s。

此外，数据中已经包含了您要编辑的元素，因此无需对数据调用 getElementsByTagName。

更改此行

data.getElementByTagName("td")[0].innerHTML = "Julius"

到

data.innerHTML = "Julius";

Answer 2

这个有效： Code snippet
试试这个：

function trans() {
  var table = document.getElementById("table");
  var row = table.getElementsByTagName("tr")[2];
  var td = row.getElementsByTagName("td")[0];

  td.innerHTML = "Julius";
}

您选择了第一个没有 td 的 tr ，其中只有 th 并且您还忘记了 "getElementsByTagName".[=19 中的 "s" =]

因为使用 "Tag" 你可以获得超过 1 个元素，你需要添加 "s" ，当它是 ID 时，你只会得到 1 个项目是有道理的，因此没有 "s" 是必需的。

Answer 3

这应该足够了。

function trans() {
  var table = document.getElementById("table"),
      tr = table.getElementsByTagName('tr')[2],
      td = tr.getElementsByTagName('td')[0];

      td.innerHTML = "Julius";
}

问题：

为了select某个键“[2]”你需要使用.getElementsByTagName而不是.getElementsByTagName;
您的目标是错误的 tr。 table 头部有 tr。因此，即使解决了 1 号问题，您也不会得到正确的结果。

使用 javascript 更改 table td

Change table td using javascript

html

javascript

css

simple-html-dom