使用 Javascript 创建 HTML 表格

Question

我的问题最终将与这个网站有关：

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

感谢任何帮助。由于我的经验有限，越简单越好。

Answer 1

问题是，如果你每次插入新标签时都尝试使用 JS 编写 <table> 或 <tr> 或 <td> 标签，浏览器会尝试关闭它，因为它会认为存在代码错误。

不要逐行编写表格，而是将表格连接到一个变量中并在创建后将其插入：

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

Answer 2

In the html file there are three input boxes with userid,username,department respectively.

这些输入框用于获取用户的输入。

用户可以向页面添加任意数量的输入。

单击按钮时，脚本将启用调试器模式。

在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>

Answer 3

这个漂亮的代码在这里创建了一个表，其中每个 td 都有数组值。不是我的代码，但它帮助了我！

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