Question

我在更改HTML表格中单元格的值时遇到问题。我只是搞乱JavaScript，因为我从来没有使用它。这是我的代码：

＆＃13;

<!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>

＆＃13;

Answer 1

你的问题有两个。

您的脚本标记位于头部并立即运行。只有在脚本可用于处理之前已处理的标记。您可以通过将脚本标记移动到<td name="Name"></td>标记下方或使用jQuery's document ready（需要jQuery）等代码延迟代码来解决此问题。
document.getElementsByName返回包含具有指定名称的所有元素的NodeList。要使用此名称操作第一个元素，您可以使用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>

Answer 2

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>

使用JavaScript更改单元格的值

2 个答案: