使用 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-01.html
EDIT: View unencrypted page source code here >>> http://dbtest.net16.net/ethanol-22.html编辑：在此处查看未加密的页面源代码 >>> http://dbtest.net16.net/ethanol-22.html
This is an HTML form with results calculated using JavaScript.这是一个 HTML 表单，其结果使用 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).我的目标是根据用户输入显示一个 2-6 列和可变行数的表（表单将被修改）。 My problem is that I am not fully understanding how to get the table created in JavaScript after the user clicks the Calculate button.我的问题是我没有完全理解在用户单击计算按钮后如何在 JavaScript 中创建表格。 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>
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).如果我可以使用我的实际 javascript 文件创建测试表并填充我的测试数据，那么我应该能够自己计算其余部分（我认为）。
Following are a couple of the best answers I could find so far:以下是我目前能找到的几个最佳答案：
http://jsfiddle.net/drewnoakes/YAXDZ/ http://jsfiddle.net/drewnoakes/YAXDZ/
The above link originated in stackoverflow but I can't seem to find the original post at this time.上面的链接起源于stackoverflow，但我现在似乎找不到原始帖子。
http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm
Any help is appreciated.任何帮助表示赞赏。 Simpler is better due to my limited experience.由于我的经验有限，越简单越好。
3 个解决方案
解决方案1
22 已采纳 2013-04-20 23:42:23
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.问题是，如果每次插入新标签时都尝试使用 JS 编写<table>或<tr>或<td>标签，浏览器将尝试关闭它，因为它会认为代码。
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>
If your code is in an external JS file, in HTML create an element with an ID where you want your table to appear:如果您的代码位于外部 JS 文件中，请在 HTML 中创建一个带有 ID 的元素，您希望在其中显示表格：
<div id="tablePrint"> </div>
And in JS instead of document.write(myTable) use the following code:并且在 JS 中代替document.write(myTable)使用以下代码：
document.getElementById('tablePrint').innerHTML = myTable;
解决方案2
0 2013-05-22 08:00:44
This beautiful code here creates a table with each td having array values.这个漂亮的代码在这里创建了一个表，每个 td 都有数组值。 Not my code, but it helped me!不是我的代码，但它帮助了我！
var rows = 6, cols = 7;
for(var i = 0; i < rows; i++) {
$('table').append('<tr></tr>');
for(var j = 0; j < cols; j++) {
$('table').find('tr').eq(i).append('<td></td>');
$('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j);
}
}
解决方案3
0 2015-10-16 09:32:16
In the html file there are three input boxes with userid,username,department respectively.
These inputboxes are used to get the input from the user.这些输入框用于获取用户的输入。
The user can add any number of inputs to the page.用户可以向页面添加任意数量的输入。
When clicking the button the script will enable the debugger mode.单击按钮时，脚本将启用调试器模式。
In javascript, to enable the debugger mode, we have to add the following tag in the javascript.在javascript中，要启用调试器模式，我们必须在javascript中添加以下标签。
/************************************************************************\\ /***************************************************** ************************\\
Tools->Internet Options-->Advanced-->uncheck
Disable script debugging(Internet Explorer)
Disable script debugging(Other)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Dynamic Table</title>
<script language="javascript" type="text/javascript">
// <!CDATA[
function CmdAdd_onclick() {
var newTable,startTag,endTag;
//Creating a new table
startTag="<TABLE id='mainTable'><TBODY><TR><TD style=\"WIDTH: 120px\">User ID</TD>
<TD style=\"WIDTH: 120px\">User Name</TD><TD style=\"WIDTH: 120px\">Department</TD></TR>"
endTag="</TBODY></TABLE>"
newTable=startTag;
var trContents;
//Get the row contents
trContents=document.body.getElementsByTagName('TR');
if(trContents.length>1)
{
for(i=1;i<trContents.length;i++)
{
if(trContents(i).innerHTML)
{
// Add previous rows
newTable+="<TR>";
newTable+=trContents(i).innerHTML;
newTable+="</TR>";
}
}
}
//Add the Latest row
newTable+="<TR><TD style=\"WIDTH: 120px\" >" +
document.getElementById('userid').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" +
document.getElementById('username').value +"</TD>";
newTable+="<TD style=\"WIDTH: 120px\" >" +
document.getElementById('department').value +"</TD><TR>";
newTable+=endTag;
//Update the Previous Table With New Table.
document.getElementById('tableDiv').innerHTML=newTable;
}
// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<label>UserID</label>
<input id="userid" type="text" /><br />
<label>UserName</label>
<input id="username" type="text" /><br />
<label>Department</label>
<input id="department" type="text" />
<center>
<input id="CmdAdd" type="button" value="Add" onclick="return CmdAdd_onclick()" />
</center>
</div>
<div id="tableDiv" style="text-align:center" >
<table id="mainTable">
<tr style="width:120px " >
<td >User ID</td>
<td>User Name</td>
<td>Department</td>
</tr>
</table>
</div>
</form>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.