堆棧內存溢出
  簡體   English   中英

使用 Javascript 創建 HTML 表格

[英]Create HTML table using Javascript

 原文  2013-04-20 23:36:25  8   3    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

任何幫助表示贊賞。 由於我的經驗有限，越簡單越好。

3 個解決方案

解決方案1
 22 已采納  2013-04-20 23:42:23

問題是，如果每次插入新標簽時都嘗試使用 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;

解決方案2
 0  2013-05-22 08:00:44

這個漂亮的代碼在這里創建了一個表，每個 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);
  }
}

解決方案3
 0  2015-10-16 09:32:16

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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 JavaScript 中的 JSON 數據創建 HTML 表 使用Javascript數組創建HTML表 如何使用 javascript 使用 DOM model 創建 Html 表？ 創建一個動態html表，並使用javascript填充xml數據 如何使用 JavaScript 創建和填充 HTML 表格 使用Javascript從文本文件創建HTML表？ 使用簡單數組中的javascript創建動態html表 使用JavaScript循環JSON並創建動態HTML表 如何使用 JavaScript 數據使用 JSON 數據創建 HTML 表 如何使用javascript中創建的對象在html中創建表？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM