web-dev-qa-db-fra.com

Créer un tableau HTML avec Javascript

Ma question sera finalement liée à ce site:

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

EDIT: Voir le code source de la page non chiffrée ici >>> http://dbtest.net16.net/ethanol-22.html

Ceci est un formulaire HTML avec des résultats calculés à l'aide de JavaScript. Mon objectif est d'afficher un tableau de 2 à 6 colonnes et un nombre variable de lignes en fonction de la saisie de l'utilisateur (le formulaire serait modifié). Mon problème est que je ne comprends pas bien comment obtenir la table créée en JavaScript après que l'utilisateur a cliqué sur le bouton Calculer. J'ai trouvé quelques bonnes réponses potentielles mais apparemment, je ne comprends pas tout. Exécuter le code suivant est un peu comme ce que je veux que ma sortie affiche.

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

Si je peux obtenir que la table de test soit créée et remplie avec mes données de test à l'aide de mon fichier javascript actuel, je devrais alors être capable de calculer le reste moi-même (je pense).

Voici quelques-unes des meilleures réponses que j'ai pu trouver jusqu'à présent:

http://jsfiddle.net/drewnoakes/YAXDZ/

Le lien ci-dessus provient de stackoverflow, mais je n'arrive pas à trouver le message original pour le moment.

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

Toute aide est appréciée. Plus simple est meilleur en raison de mon expérience limitée. 

javascripthtml-table
20
richard97

Le problème est que si vous essayez d'écrire une balise <table> ou <tr> ou <td> en utilisant JS chaque fois que vous insérez une nouvelle balise, le navigateur essaiera de la fermer car il pensera qu'il y a une erreur dans le code. 

Au lieu d'écrire votre table ligne par ligne, concaténez votre table dans une variable et insérez-la une fois créée:

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

Si votre code est dans un fichier JS externe, créez en HTML un élément avec un ID où vous souhaitez que votre table apparaisse:

<div id="tablePrint"> </div>

Et dans JS au lieu de document.write(myTable), utilisez le code suivant:

document.getElementById('tablePrint').innerHTML = myTable;
19
multimediaxp

Ce beau code crée ici une table avec chaque td ayant des valeurs de tableau. Pas mon code, mais ça m'a aidé!

           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.

Ces boîtes de saisie sont utilisées pour obtenir la saisie de l'utilisateur.

L'utilisateur peut ajouter un nombre quelconque d'entrées à la page.

Lorsque vous cliquez sur le bouton, le script active le mode débogage.

En javascript, pour activer le mode débogueur, nous devons ajouter la balise suivante dans le 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