ric*_*d97 23 javascript html-table
我的问题最终将与此网站相关:
http://dbtest.net16.net/ethanol-01.html
编辑:在这里查看未加密的页面源代码>>> http://dbtest.net16.net/ethanol-22.html
这是一个HTML表单,其结果使用JavaScript计算.我的目标是根据用户输入显示一个包含2-6列和可变行数的表(表单将被修改).我的问题是,我没有完全理解在用户单击"计算"按钮后如何获取在JavaScript中创建的表.我发现了一些潜在的好答案,但显然并不完全理解这一切.运行以下代码有点像我想要显示的输出.
<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文件创建测试表并使用我的测试数据填充,那么我应该能够自己计算其余部分(我认为).
以下是我目前可以找到的几个最佳答案:
http://jsfiddle.net/drewnoakes/YAXDZ/
上面的链接起源于stackoverflow,但我现在似乎无法找到原始帖子.
http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm
任何帮助表示赞赏.由于我的经验有限,更简单更好.
mul*_*axp 22
问题是,如果你试图写一个<table>或一个<tr>或<td>标签每次使用JS你插入一个新的标签,浏览器将尝试关闭它,因为它会认为有在代码中的错误.
不是逐行编写表,而是将表连接成变量并在创建后插入它:
<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的元素:
<div id="tablePrint"> </div>
而在JS而不是document.write(myTable)使用以下代码:
document.getElementById('tablePrint').innerHTML = myTable;