Подтвердить что ты не робот

Создание таблицы HTML с помощью javascript

Новое здесь. Мой уровень знаний - любитель. В конечном итоге мой вопрос будет связан с этим сайтом:

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

EDIT: просмотр незашифрованного исходного кода здесь → > 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

Любая помощь приветствуется. Упрощение лучше из-за моего ограниченного опыта. Спасибо.

4b9b3361

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что если вы пытаетесь записать тег <table> или <tr> или <td> с помощью JS каждый раз, когда вы вставляете новый тег, браузер попытается закрыть его, поскольку он будет думать, что есть ошибка в коде.

Вместо того, чтобы писать таблицу по строкам, объедините таблицу в переменную и вставьте ее после создания:

<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 создайте элемент с идентификатором, в котором должна появиться ваша таблица:

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

И в JS вместо document.write(myTable) используйте следующий код:

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

Ответ 2

Java Script: динамически создавать HTML-таблицу

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);
}

Нажмите здесь, чтобы прочитать полную статью здесь.

Эта статья включает в себя следующее:

Динамически создавать таблицу в Java Script.

Применить CSS для динамически созданной таблицы.

Ответ 3

Этот красивый код здесь создает таблицу с каждым 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);
            }
        }

Ответ 4

In the html file there are three input boxes with userid,username,department respectively.

Эти входные поля используются для получения ввода от пользователя.

Пользователь может добавить любое количество входов на страницу.

При нажатии кнопки script активирует режим отладки.

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