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>

然后，我必须写下＆＃39; tbody＆＃39;标记到文档后跟一个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>

其中date，amount，firstName，lastName，street，city， state和zip是日期，金额，firstName， lastName，street，city和zip数组分别对应于该值来自for循环中的计数器变量。在for循环之后，写出＆＃39; / tbody＆＃39;标记以关闭表体，然后关闭表标记。

所以我写了一些我认为是一些代码来启动标题行，如下所示：

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文件中的函数中则不执行任何操作。我真的迷路了，需要一个kickstart。如果我没记错了＆＃34;功能＆＃34;应该返回一个值，所以我知道在尝试编写这个函数时我必须在这里遗漏一些东西。

任何帮助都将非常感谢！谢谢。

约翰

Answer 1

避免使用document.write（and probably for anything else）。

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

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

如果您仍然决定使用document.write，那么方法是生成完整的HTML，然后一次性写入，因为它无法使用它来创建表格，并且然后再次使用它来填写该表。

这是一个简单的示例，只是为了让您入门：

＆＃13;

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

＆＃13;

#contributors {
  border: 1px solid green
}

＆＃13;

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

写一个显示html的javascript函数

4 个答案: