Question

在这里寻求帮助。我们的班级老师要求我们使用document.write将表添加到javascript中，我知道这不是推荐的方法，但这是我们的教师正在寻找的：将代码添加到writeIt函数中，该函数在通过heros和villians迭代之前写入开始表标记，然后是结束表标记。然后修改makeListItem以返回tr td Hero td td Villan / td / tr形式的字符串。

我试过这个但是在尝试查看时我得到一个空白的html页面。

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Functions</title>
    <meta charset="utf-8" />
    <script>
      var superData = {"Super Man":["Lex Luther"],
                       "Bat Man":["Joker", "Riddler",],
                       "Spider Man":["Green Goblin", 
                                     "Vulture", "Carnage"],
                       "Thor":["Loki", "Frost Giants"]};
      function writeIt('<table>'){
        for (hero in superData){
          var villains = superData[hero];
          for (villainIdx in villains){
            var villain = villains[villainIdx];
            var listItem = makeListItem(<tr><td>Hero</td><td>Villan</td></tr>);
            document.write(listItem);
          }
        }
      }
      function makeListItem(name, value){
        var itemStr = "<li>" + name + ":&nbsp;" + value + "</li>";
        return itemStr;
      }
        document.write('</table>');
    </script>
  </head>
  <body onload="writeIt()">
  </body>
</html>

＆＃13;

Answer 1

试试这个：

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript Functions</title>
  <meta charset="utf-8" />
  <script>
    var superData = {
      "Super Man": ["Lex Luther"],
      "Bat Man": ["Joker", "Riddler", ],
      "Spider Man": ["Green Goblin",
        "Vulture", "Carnage"
      ],
      "Thor": ["Loki", "Frost Giants"]
    };

    function writeIt() {
      document.write('<table>');
      for (hero in superData) {
        document.write("<tr><td>" + hero + ": <ul>");
        var villains = superData[hero];
        for (villainIdx in villains) {
          var villain = villains[villainIdx];
          var listItem = makeListItem(villain);
          document.write(listItem);
        }
        document.write("</ul></td></tr>");
      }
    }

    function makeListItem(value) {
      var itemStr = "<li>" + value + "</li>";
      return itemStr;
    }
    document.write('</table>');
  </script>
</head>

<body onload="writeIt()">
</body>

</html>

Answer 2

我试过这个但是在尝试查看时我得到一个空白的html页面。

因为您有语法问题。使用F12或Inspector / Developer模式找出原因。

我们的班级讲师要求我们使用document.write将表添加到javascript中，我知道这不是推荐的方法，但这是我们的教师正在寻找的

确实，它经常不赞成，但JavaScript因为一个原因而提供它，所以让我们使用它。

第一个问题是你似乎转换了一些代码......

例如，您有function writeIt('<table>')。我认为你的意思是document.write('<table>');。

function writeIt(){
   document.write('<table>');

接下来，您的最终document.write在函数调用之外。

    document.write('</table>');

这应该在你的for循环之后writeIt()内。

最后，你的循环中有一些不带引号的东西......

makeListItem(<tr><td>Hero</td><td>Villan</td></tr>);

应该是（单引号或双引号）：

makeListItem('<tr><td>Hero</td><td>Villan</td></tr>');

但对于桌子来说，这仍然有点不对劲。例如，超人与他的恶棍的比例为1：1，蝙蝠侠的比例为1：2。您应该以更可预测的方式添加行和表，但上述内容至少会开始为您提供输出。

最后，观察到您的makeListItem在使用<ul>之前需要使用<li>，因此需要解决这些问题。现在，我建议您稍后将数据吐出并格式化。

使用document.write将html表添加到javascript

2 个答案: