使用JavaScript更改单元格的值

Changing value of a cell with JavaScript

本文关键字：单元格 JavaScript 使用      更新时间：2023-09-26

我在更改HTML表中单元格的值时遇到问题。我只是在摆弄JavaScript，因为我从未使用过它。以下是我的代码：

<!DOCTYPE html>
<html>
<head>
  <script>
    var name = "Requiem";
    var health = 100;
    var strength = 1;
    var agility = 1;
    var intelligence = 1;
    var gold = 50;
    var Class = "Warrior";
    document.getElementsByName('Name').innerHTML = name;
  </script>
</head>
<body>
  <table id="myTable" border="1">
    <tr>
      <td>Name</td>
      <td>Health</td>
      <td>Strength</td>
      <td>Agility</td>
      <td>Intelligence</td>
      <td>Gold</td>
      <td>Class</td>
    </tr>
    <tr>
      <td name="Name"></td>
      <td name="Health"></td>
      <td name="Strength"></td>
      <td name="Agility"></td>
      <td name="Intelligence"></td>
      <td name="Gold"></td>
      <td name="Class"></td>
    </tr>
  </table>
</body>
</html>

您的问题有两个方面。

  1. 您的脚本标记位于头部并立即运行。只有在脚本之前已经处理过的标记才能进行操作。您可以通过将脚本标记移到<td name="Name"></td>标记下方或使用类似jQuery的文档就绪（需要jQuery）之类的东西延迟代码来解决此问题。

  2. CCD_ 2返回包含具有指定名称的所有元素的CCD_。要操作具有此名称的第一个元素，可以使用document.getElementsByName("Name")[0]。

示例：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <td>Name</td>
            <td>Health</td>
            <td>Strength</td>
            <td>Agility</td>
            <td>Intelligence</td>
            <td>Gold</td>
            <td>Class</td>
        </tr>
        <tr>
            <td name="Name"></td>
            <td name="Health"></td>
            <td name="Strength"></td>
            <td name="Agility"></td>
            <td name="Intelligence"></td>
            <td name="Gold"></td>
            <td name="Class"></td>
        </tr>
    </table>
    <script>
        var name = "Requiem";
        var health = 100;
        var strength = 1;
        var agility = 1;
        var intelligence = 1;
        var gold = 50;
        var Class = "Warrior";
        document.getElementsByName('Name')[0].innerHTML = name;
    </script>
</body>
</html>

document.getElementsByName()返回一个NodeList（注意它是Elements而不是Element，所以您必须指定要修改的元素。

在这种情况下，只有一个元素，所以您只需要访问列表中的第一个：

document.getElementsByName("Name")[0].innerHTML = name;


var name = "Requiem";
var health = 100;
var strength = 1;
var agility = 1;
var intelligence = 1;
var gold = 50;
var Class = "Warrior";
document.getElementsByName('Name')[0].innerHTML = name;
<!DOCTYPE html>
<html>
<body>
  <table id="myTable" border="1">
    <tr>
      <td>Name</td>
      <td>Health</td>
      <td>Strength</td>
      <td>Agility</td>
      <td>Intelligence</td>
      <td>Gold</td>
      <td>Class</td>
    </tr>
    <tr>
      <td name="Name"></td>
      <td name="Health"></td>
      <td name="Strength"></td>
      <td name="Agility"></td>
      <td name="Intelligence"></td>
      <td name="Gold"></td>
      <td name="Class"></td>
    </tr>
  </table>
</body>
</html>

相关文章：