Создать HTML-таблицу с помощью javascript

Новое здесь. Мой уровень знаний - любитель. Мой вопрос будет в конечном счете связаны с этого сайта:Создать 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

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

источник

2013-04-20 richard97

Ahh, не видел 'document.write' и этот способ настройки Массив на некоторое время ... –

Проблема заключается в том, что если вы пытаетесь написать <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;

источник

2013-04-20 23:42:23 multimediaxp

Не используйте 'document.write'. Используйте 'document.body.appendChild'. –

Спасибо всем до сих пор. Моя основная проблема заключается в создании таблицы. Эдди - создает ли ваш код таблицу? Дерек - мне придется учиться на document.body.appendChild, так как я любитель. Вышеупомянутый код предназначен только для тестирования выходных данных и форматирования. – richard97

Он работал автономно в собственном HTML-файле, но не при включении в мой код javascript для дальнейшего тестирования. См. Ссылку на мой сайт рядом с оригинальным сообщением. – richard97

Этот красивый код здесь создает таблицу с каждым 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. Я думаю, тема о Ваниле. –

Благодаря Бен Тейлор и SLonoed. Я проверю это, как позволяет время. Это может также пригодиться в другом месте в другом проекте. – richard97

Любой, кто хочет просмотреть мой полуфинал, работает с кодом HTML и Javascript (незашифрованным), может его просмотреть: http://dbtest.net16.net/ethanol-22.html - Просмотр источника страницы в вашем браузере. Обратите внимание, что код Javascript, относящийся к этой теме, по-прежнему довольно неряшлив и начинается примерно по строке 572. Это должно быть более читаемым, если вы удалите все мои прокомментированные строки. Также обратите внимание, что эта страница позволяет создавать таблицу в новой вкладке/окне или внизу текущей страницы или вообще не иметь таблицы. Это контролируется выбором переключателей на странице HTML. – richard97

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

Применить 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

Создать HTML-таблицу с помощью javascript

ответ

Смежные вопросы