使用 document.write 将 html 表添加到 javascript
[英]Adding html table to javascript using document.write
问题描述
Looking for some help here.
在这里寻求帮助。 Our class instructor is asking us to add a table into javascript using the document.write, I know this is not the recommended way to do this, but this is what our instructor is looking for: Add code to the writeIt function that writes the opening table tag before iterating thru the heros and villians and then the closing table tag.我们的班级讲师要求我们使用 document.write 将表格添加到 javascript 中，我知道这不是推荐的方法，但这是我们的讲师正在寻找的：将代码添加到写入开头的 writeIt 函数table 标签，然后遍历 heros 和 villians，然后是结束 table 标签。 Then modify the makeListItem to return a string in the form of tr td Hero td td Villan /td /tr.然后修改makeListItem，返回tr td Hero td td Villan /td /tr形式的字符串。
I tried this but am getting a blank html page when try to view.我试过这个，但在尝试查看时得到一个空白的 html 页面。
<!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 + ": " + value + "</li>"; return itemStr; } document.write('</table>'); </script> </head> <body onload="writeIt()"> </body> </html>
2 个解决方案
解决方案1
0 2018-02-05 17:44:45
Try this:尝试这个：
<!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>
解决方案2
0 2018-02-05 18:05:19
I tried this but am getting a blank html page when try to view.
Because you have syntax problems.因为你有语法问题。 Use F12 or the Inspector/Developer mode to find out why.使用 F12 或 Inspector/Developer 模式找出原因。
Our class instructor is asking us to add a table into javascript using the document.write, I know this is not the recommended way to do this, but this is what our instructor is looking for
True, it's often frowned upon, but JavaScript makes it available for a reason, so let's use it.的确，它经常被人反对，但 JavaScript 使它可用是有原因的，所以让我们使用它。
The first problem is that you seem to have transposed some code...第一个问题是你好像调换了一些代码...
For example, you have function writeIt('<table>') .例如，您有function writeIt('<table>') 。 I think you meant document.write('<table>');我想你的意思是document.write('<table>'); . .
function writeIt(){
document.write('<table>');
Next, you have your final document.write outside of your function call.接下来，您将在函数调用之外获得最终的document.write 。
document.write('</table>');
This should be inside writeIt() , just after your for loop.这应该在writeIt()内部，就在您的 for 循环之后。
Finally, you have some unquoted stuff in your loop...最后，你的循环中有一些未引用的东西......
makeListItem(<tr><td>Hero</td><td>Villan</td></tr>);
Should be (single or double quotes):应该是（单引号或双引号）：
makeListItem('<tr><td>Hero</td><td>Villan</td></tr>');
But that's still a bit off for a table.但这对于一张桌子来说仍然有点不对劲。 For example, Superman has a 1:1 ratio with his villains and Batman has a 1:2 ratio.例如，超人与他的恶棍的比例为 1:1，而蝙蝠侠的比例为 1:2。 You should be adding your rows and tables in a more predictable manner, but the above will at least start to give you output to work from.您应该以更可预测的方式添加行和表，但以上内容至少会开始为您提供输出。
Finally, an observation is that your makeListItem needs to use <ul> before it uses <li> so those problems need to be resolved.最后，需要注意的是，您的makeListItem在使用<li>之前需要使用<ul> ，因此需要解决这些问题。 For now, I recommend you just spit the data out and format it later.现在，我建议您只是将数据吐出并稍后对其进行格式化。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.