web-dev-qa-db-ja.com

JavaScriptを使用してHTMLテーブルを作成する

私の質問は最終的にこのサイトに関連します：

http://dbtest.net16.net/ethanol-01.html

編集：暗号化されていないページのソースコードはこちら>>> http://dbtest.net16.net/ethanol-22.html

これは、JavaScriptを使用して計算された結果を持つHTMLフォームです。私の目標は、ユーザー入力に応じて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

どんな助けも大歓迎です。経験が限られているため、シンプルな方が良いです。

javascripthtml-table
22
richard97

問題は、新しいタグを挿入するたびにJSを使用して_<table>_または_<tr>_または_<td>_タグを書き込もうとすると、ブラウザーはそれを考えるとそれを閉じようとすることですコードにエラーがあります。

テーブルを1行ずつ記述する代わりに、テーブルを変数に連結し、作成後に挿入します。

_<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;
_
21
multimediaxp

この美しいコードは、各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);
            }
        }
0
Ben Taylor
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>
0
kripal Patel