使用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表格

回答

相關問題