编写一个显示html的javascript函数

我在大学课程中第一次接触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是日期、金额、名字、， 分别对应于值的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>")

document.write（“”）
文件。写（“”）
文件。写（“”）
文件。填写（“日期金额”）
文件。书写（“名字姓氏”）
文件。填写（“地址”）
文件。写（“”）
文件。写（“”）

如果我将此代码放在脚本标记之间的html中，它会将标题行写入文档，但如果我将此代码放在js文件中的函数中，它不会执行任何操作。我真的迷路了，需要一个新的开始。如果我没记错的话，一个“函数”应该返回一个值，所以我知道当我试图写这个函数的时候，我肯定是遗漏了什么

任何帮助都将不胜感激！多谢各位

---

John

如果将此代码放入函数中，则需要调用该函数才能执行。或者，您可以将其放入一个立即函数中，该函数将按如下方式执行：

(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>")
}());

（函数（）{
文件。写（“”）
文件。写（“”）
文件。写（“”）
文件。填写（“日期金额”）
文件。书写（“名字姓氏”）
文件。填写（“地址”）
文件。写（“”）
文件。写（“”）
}());

避免使用

文档。为此（）编写

这里正确的方法是将子元素添加到它们的容器中。因此，对于第一部分，假设表是主体的直接子级，您可以执行类似于
document.body.appendChild（generatedTableElementHere）的操作

然后，对于下一部分，容器元素将是表，在for循环中，您可以执行类似
document.getElementById（'contributors'）.appendChild（generatedRowelmentHere）的操作


如果您仍然决定使用
document.write
，方法是生成完整的HTML，然后一次全部写入，因为无法使用它创建表，然后再次使用它填充该表


下面是一个简单的示例，让您开始学习：


var table=document.createElement（'table'）；
table.id=‘贡献者’；
table.innerHTML=“”+
"" +
“日期金额”+
“名字姓氏”+
“地址”+
"" +
"";
var stuff=['a'，'b'，'c'，'d'，'e'，'f']；
document.body.appendChild（表）；
for（var i=0；i

#贡献者{
边框：1px纯绿
}
如果将其放在函数中，则还需要调用该函数，例如，当文档准备就绪或已加载时，或当您单击按钮时……例如，函数foo（），然后

您可以使用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);
}

函数显示表（索引）
{
var table=“”
+""
+""
+“日期金额”
+“名字姓氏”
+“地址”
+""
+""
+""
//使用table+='values'为每行添加循环
表+=“”
+"";
document.getElementById（'tableContainer'）.appendChild（表）；
}

请记住，属性Id应该是唯一的，因此在本例中，您可能需要将表添加到类似以下内容的容器中

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



问候

在解析页面后调用时打开一个新文档。看起来您在这里混合了jQuery和Vanilla JS。这行不通。@Teemu我把Jquery和Js混合在一起了，现在我改成使用纯Js了，我一开始应该使用的方法我不明白你为什么说把Jquery和Vanilla Js混合在一起？嗯
appendChild
将元素作为参数，而不是字符串。。。您仍然在混合jQuery和Vanilla JS。
<div id='tableContainer'></div>