使用javascript创建HTML表格

新增功能。我的知识水平是爱好者。我的问题最终会涉及到这个网站：使用javascript创建HTML表格

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/

上面的链接起源于计算器，但我似乎无法找到原帖在这个时候。

http://www.java2s.com/Tutorial/JavaScript/0220__Array/OutputarrayelementinaHTMLtableformat.htm

任何帮助表示赞赏。由于我有限的经验，更简单更好。谢谢。

来源

2013-04-20 richard97

啊，还没有见过'document.write'和那种设置方式一阵阵...... – 2013-04-20 23:39:39

的问题是，如果你尝试使用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;

来源

2013-04-20 23:42:23 multimediaxp

不要使用'document.write'。使用'document.body.appendChild'。 – 2013-04-20 23:43:04

感谢所有迄今。我的主要问题是创建表格。 Eddy - 你的代码是否创建了表格？德里克 - 我必须研究document.body.appendChild，因为我是一名业余爱好者。上面的代码仅用于测试输出和格式。 – richard97 2013-04-20 23:53:16

它独立运行在它自己的HTML文件中，但是并入到我的javascript代码中进行进一步测试时不会。看到我原来的帖子顶部附近的网站链接。 – richard97 2013-04-21 00:02:39

这个漂亮的代码在这里创建一个表，每个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); 
      } 
     }

来源

2013-05-22 08:00:44

它使用Jquery。我认为关于香草的话题。 – 2013-05-22 08:04:01

感谢Ben Taylor＆SLonoed。我会在时间允许的情况下检查一下。这也可能在另一个项目的其他地方派上用场。 – richard97 2013-05-22 22:53:53

任何人都希望查看我的半决赛HTML和Javascript代码（未加密）可以查看它听到：http://dbtest.net16.net/ethanol-22.html - 在浏览器中查看页面源代码。请注意，与此主题相关的Javascript代码仍然很sl and，从第572行开始。如果删除所有注释行，它应该更具可读性。另外请注意，此页面允许在新的选项卡/窗口或当前页面的底部创建表格，或者根本没有表格。这由HTML页面中的单选按钮选择控制。 – richard97 2013-06-30 12:19:54

function createTable() { 
    // Create table. 
    var table = document.createElement('table'); 
    // Insert New Row for table at index '0'. 
    var row1 = table.insertRow(0); 
    // Insert New Column for Row1 at index '0'. 
    var row1col1 = row1.insertCell(0); 
    row1col1.innerHTML = 'Col1'; 
    // Insert New Column for Row1 at index '1'. 
    var row1col2 = row1.insertCell(1); 
    row1col2.innerHTML = 'Col2'; 
    // Insert New Column for Row1 at index '2'. 
    var row1col3 = row1.insertCell(2); 
    row1col3.innerHTML = 'Col3'; 
    // Append Table into div. 
    var div = document.getElementById('divTable'); 
    div.appendChild(table); 
}

Click here to read complete article here.

本文包括以下内容：

在Java脚本动态创建表。

将CSS应用于动态创建的表。

来源

2014-03-12 04:25:24

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>

来源

2015-10-16 09:32:16

使用javascript创建HTML表格

回答

相关问题