使用Javascript创建HTML表 [英] Create HTML table using Javascript
问题描述
我的问题最终将与此网站相关：
My question will ultimately be related to this site:
http://dbtest.net16.net/ethanol-01.html
编辑：在此处查看未加密的页面源代码>> > http://dbtest.net16.net/ethanol-22.html
View unencrypted page source code here >>> http://dbtest.net16.net/ethanol-22.html
这是一个HTML表单，其结果使用JavaScript计算。我的目标是根据用户输入显示一个包含2-6列和可变行数的表（表单将被修改）。我的问题是，我没有完全理解在用户单击计算按钮后如何获取在JavaScript中创建的表。我发现了一些潜在的好答案，但显然并不完全理解这一切。运行以下代码有点像我希望输出显示的内容。
This is an HTML form with results calculated using JavaScript. My goal is to display a table of 2-6 columns and variable number of rows depending on user input (form would be modified). My problem is that I am not fully understanding how to get the table created in JavaScript after the user clicks the Calculate button. I have found some potential good answers but apparently don't fully understand it all. Running the following code is somewhat like what I want my output to display.
<html>
<!-- http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm -->
<head>
<title>Table of Numbers</title>
</head>
<body>
<h1>Table of Numbers</h1>
<table border="0">
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
myArray[0] = 1;
myArray[1] = 2.218;
myArray[2] = 33;
myArray[3] = 114.94;
myArray[4] = 5;
myArray[5] = 33;
myArray[6] = 114.980;
myArray[7] = 5;
document.write("<tr><td style='width: 100px; color: red;'>Col Head 1</td>");
document.write("<td style='width: 100px; color: red; text-align: right;'>Col Head 2</td>");
document.write("<td style='width: 100px; color: red; text-align: right;'>Col Head 3</td></tr>");
document.write("<tr><td style='width: 100px;'>---------------</td>");
document.write("<td style='width: 100px; text-align: right;'>---------------</td>");
document.write("<td style='width: 100px; text-align: right;'>---------------</td></tr>");
for (var i = 0; i < 8; i++) {
document.write("<tr><td style='width: 100px;'>Number " + i + " is:</td>");
myArray[i] = myArray[i].toFixed(3);
document.write("<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td>");
document.write("<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td></tr>");
}
//-->
</script>
</table>
</body>
</html>
如果我可以使用我的实际javascript文件创建测试表并使用我的测试数据填充然后我应该能够自己计算其余部分（我认为）。
If I can get the test table to be created and populated with my test data using my actual javascript file, then I should then be able to figure the rest myself (I think).
以下是迄今为止我能找到的几个最佳答案：
Following are a couple of the best answers I could find so far:
http://jsfiddle.net/drewnoakes/YAXDZ/
上面的链接起源于stackoverflow，但我现在似乎无法找到原帖。
The above link originated in stackoverflow but I can't seem to find the original post at this time.
http://www.java2s.com/Tutorial/JavaScript/0220__Array /OutputarrayelementinaHTMLtableformat.htm
任何帮助表示赞赏。由于我的经验有限，更简单更好。
Any help is appreciated. Simpler is better due to my limited experience.
推荐答案
问题在于，如果你试图写一个< table> 或< tr> 或< td> 标记每次插入新标记时使用JS浏览器会尝试关闭它，因为它会认为代码有错误。
The problem is that if you try to write a <table> or a <tr> or <td> tag using JS every time you insert a new tag the browser will try to close it as it will think that there is an error on the code.
不是逐行写表，而是将表连接成变量并在创建后插入它：
Instead of writing your table line by line, concatenate your table into a variable and insert it once created:
<script language="javascript" type="text/javascript">
<!--
var myArray = new Array();
myArray[0] = 1;
myArray[1] = 2.218;
myArray[2] = 33;
myArray[3] = 114.94;
myArray[4] = 5;
myArray[5] = 33;
myArray[6] = 114.980;
myArray[7] = 5;
var myTable= "<table><tr><td style='width: 100px; color: red;'>Col Head 1</td>";
myTable+= "<td style='width: 100px; color: red; text-align: right;'>Col Head 2</td>";
myTable+="<td style='width: 100px; color: red; text-align: right;'>Col Head 3</td></tr>";
myTable+="<tr><td style='width: 100px; '>---------------</td>";
myTable+="<td style='width: 100px; text-align: right;'>---------------</td>";
myTable+="<td style='width: 100px; text-align: right;'>---------------</td></tr>";
for (var i=0; i<8; i++) {
myTable+="<tr><td style='width: 100px;'>Number " + i + " is:</td>";
myArray[i] = myArray[i].toFixed(3);
myTable+="<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td>";
myTable+="<td style='width: 100px; text-align: right;'>" + myArray[i] + "</td></tr>";
}
myTable+="</table>";
document.write( myTable);
//-->
</script>
如果你的代码在外部JS文件中，在HTML中创建一个带有你想要的ID的元素要显示的表格：
If your code is in an external JS file, in HTML create an element with an ID where you want your table to appear:
<div id="tablePrint"> </div>
在JS而不是 document.write（myTable）使用以下代码：
And in JS instead of document.write(myTable) use the following code:
document.getElementById('tablePrint').innerHTML = myTable;
这篇关于使用Javascript创建HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
