问题描述
我的问题最终将与本网站有关:
http://dbtest.net16.net/ethanol-01.html
在此处查看未加密的页面源代码 >>> http://dbtest.net16.net/乙醇-22.html
这是一个 HTML 表单，其结果使用 JavaScript 计算.我的目标是根据用户输入显示 2-6 列和可变行数的表格(表单将被修改).我的问题是我没有完全理解在用户单击计算按钮后如何在 JavaScript 中创建表格.我找到了一些潜在的好答案，但显然还没有完全理解.运行以下代码有点像我希望我的输出显示的内容.
如果我可以使用我的实际 javascript 文件创建测试表并填充我的测试数据，那么我应该能够自己计算其余部分(我认为).
以下是我目前能找到的几个最佳答案:
http://jsfiddle.net/drewnoakes/YAXDZ/
上面的链接来自stackoverflow，但我现在似乎找不到原始帖子.
http://www.java2s.com/Tutorial/JavaScript/0220__Array/输出arrayelementinaHTMLtableformat.htm
感谢任何帮助.由于我的经验有限，越简单越好.
问题是如果你尝试写一个 不要逐行编写表格，而是将表格连接成一个变量并在创建后插入: 如果您的代码在外部 JS 文件中，请在 HTML 中创建一个带有 ID 的元素，您希望表格出现在其中: 并且在 JS 中而不是 My question will ultimately be related to this site: http://dbtest.net16.net/ethanol-01.html EDIT: View unencrypted page source code here >>> http://dbtest.net16.net/ethanol-22.html 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. 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/ 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. The problem is that if you try to write a Instead of writing your table line by line, concatenate your table into a variable and insert it once created: If your code is in an external JS file, in HTML create an element with an ID where you want your table to appear: And in JS instead of 这篇关于使用 Javascript 创建 HTML 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 或
> 或 <td> 标签使用 JS 每次插入新标签时，浏览器都会尝试关闭它，因为它会认为代码中有错误.document.write(myTable) 使用以下代码:document.getElementById('tablePrint').innerHTML = myTable;<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>
<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. <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>
<div id="tablePrint"> </div>
document.write(myTable) use the following code:document.getElementById('tablePrint').innerHTML = myTable;