编写一个显示 html 的 javascript 函数

Question

我在大学课程中第一次接触到 javascript，而教科书对我一点帮助也没有。这看起来很简单，但我就是无法让它工作。那么问题来了：

我必须编写一个名为 showTable() 的函数来将以下代码写入文档以创建表格的标题行：

<table id='contributors'>
<thead>
<tr>
<th>Date</th><th>Amount</th>
<th>First Name</th><th>Last Name</th>
<th>Address</th>
</tr>
</thead>

然后我必须将“tbody”标签写入文档，然后使用 for 循环为 lastName 数组中列出的每个人创建一行。每次遍历数组时都应该添加以下代码：

<tr>
<td>date</td>
<td class='amt'>amount</td>
<td>firstName</td>
<td>lastName</td>
<td>street <br />
city, state zip
</td>
</tr>

日期、金额、名字、姓氏、街道、城市、 state 和 zip 是 date、amount、firstName、 lastName、street、city、zip数组，分别对应值 来自for循环中的计数器变量。在for循环之后，写'/tbody'标签以关闭表体，然后是关闭表标签。

所以我写了一些我认为是开始标题行的代码，如下所示：

document.write("<table id='contributors'>")
document.write("<thead>")
document.write("<tr>")
document.write("<th>Date</th><th>Amount</th>")
document.write("<th>First Name</th><th>Last Name</th>")
document.write("<th>Address</th>")
document.write("</tr>")
document.write("</thead>")

如果我将此代码放在脚本标记之间的 html 中，它会将标题行写入文档，但是如果我将此代码放在 js 文件中的函数中，它什么也不做。我真的迷路了，需要在这里启动。如果我没记错的话，一个“函数”应该返回一个值，所以我知道在尝试编写这个函数时我肯定在这里遗漏了一些东西。

任何帮助都将不胜感激！谢谢。

约翰

Answer 1

避免为此使用document.write (and probably for anything else)。

这里的正确方法是将子元素添加到它们的容器中。所以，对于第一部分，假设 table 是 body 的直接孩子，你可以做类似document.body.appendChild(generatedTableElementHere); 的事情。

然后，对于下一部分，容器元素将是表格，在 for 循环中，您可以执行 document.getElementById('contributors').appendChild(generatedRowElementHere); 之类的操作。

---

如果你还是决定使用document.write，方法是生成完整的HTML，然后一次性写入，因为不能用它来创建表格，然后再用它来填充在那张桌子上。

---

这里有一个简单的例子来帮助你入门：

var table = document.createElement('table');
table.id = 'contributors';
table.innerHTML = "<thead>" +
  "<tr>" +
  "<th>Date</th><th>Amount</th>" +
  "<th>First Name</th><th>Last Name</th>" +
  "<th>Address</th>" +
  "</tr>" +
  "</thead>";

var stuff = ['a', 'b', 'c', 'd', 'e', 'f'];

document.body.appendChild(table);

for (var i = 0; i < stuff.length; i++) {
  var template = document.createElement('tbody');
  template.innerHTML = "<tr>" +
    "<td>date " + stuff[i] + "</td>" +
    "<td class='amt'>amount " + stuff[i] + "</td>" +
    "<td>firstName " + stuff[i] + "</td>" +
    "<td>lastName " + stuff[i] + "</td>" +
    "<td>street, city, state zip " + stuff[i] + "" +
    "</td>" +
    "</tr>";
  table.appendChild(template);
}

#contributors {
  border: 1px solid green
}

Answer 2

如果您将此代码放在函数中，则需要调用该函数才能执行它。或者，您可以将其放在一个立即执行的函数中，该函数将像这样执行：

(function(){
    document.write("<table id='contributors'>")
    document.write("<thead>")
    document.write("<tr>")
    document.write("<th>Date</th><th>Amount</th>")
    document.write("<th>First Name</th><th>Last Name</th>")
    document.write("<th>Address</th>")
    document.write("</tr>")
    document.write("</thead>")
}());

Answer 3

如果你把它放在一个函数中，那么你也需要调用那个函数，例如当文档准备好或加载时，或者当你点击一个按钮时......例如函数 foo() 然后

document.onload = function()
{

foo();
//Javascript code goes here
}

Answer 4

您可以使用 appendChild() 方法

function showTable(index)
{
  var table="<table class='contributors' id='table_index'>"
     +"<thead>"
        +"<tr>"
           +"<th>Date</th><th>Amount</th>"
           +"<th>First Name</th><th>Last Name</th>"
           +"<th>Address</th>"
        +"</tr>"
     +"</thead>"
     +"<tbody>"
         //adding the cicle for each row using table+='values'
     table+="</tbody>"
          +"</table>";
     document.getElementById('tableContainer').appendChild(table);
}

请记住，属性 Id 应该是唯一的，因此对于示例，您可能需要将表添加到类似容器中

<div id='tableContainer'></div>

问候。

resources