Контроллинг стол с JS

Я написал очень простой кодКонтроллинг стол с JS

<!DOCTYPE html> 
<html> 

<body> 

<table id="myTable" border = "1"></table> 

<script> 

    for(var i = 1; i<=5; i++){ 
     var tableRow = "<tr>"; 
     tableRow+= "<td>" + "JS Table" + "</td>"; 
     tableRow+= "</tr>";   
    } 

    document.getElementById("myTable").innerHTML = tableRow; 

    </script> 

</body> 
</html>

Я хочу, чтобы создать таблицу как этот фрагмент кода

<table border = "1"> 
     <tr> 
      <td>JS Table</td> 
     </tr> 
     <tr> 
      <td>JS Table</td> 
     </tr> 
     <tr> 
      <td>JS Table</td> 
     </tr> 
     <tr> 
      <td>JS Table</td> 
     </tr> 
     <tr> 
      <td>JS Table</td> 
     </tr> 
    </table>

Но это дает только одну строку в то время как я поставил петлю в 5 раз. Как это решить.

У меня возникла еще одна проблема. Если я напишу javascript в главном теге, я не получаю никакого вывода &, он говорит: document.getElementById ("myTable"). InnerHTML "имеет значение null. Как исправить это?

<!DOCTYPE html> 
<html> 
<head>  

    <script> 

    for(var i = 1; i<=5; i++){ 
     var tableRow = "<tr>"; 
     tableRow+= "<td>" + "JS Table" + "</td>"; 
     tableRow+= "</tr>";   
    } 

    document.getElementById("myTable").innerHTML = tableRow; 

    </script> 

</head> 

<body> 

<table id="myTable"></table> 

</body> 
</html>

источник

2015-07-20 Brijesh Maurya

объявить 'ва r tableRow' перед циклом и удалить ключевое слово 'var' внутри цикла. Также вам нужно обновить содержимое '

' только в том случае, если dom готов. Таким образом, вы можете поместить тег сценария после '

' – Hacketo

@Brijesh для вашего второго вопроса: код html будет вызываться по очереди, когда это произойдет. Когда браузер достигает строки с 'document ...', элемент таблицы еще не существует. Решение: оберните функцию Javascript в такие события, как 'onload' или' ondomready', или разместите ее после вашей таблицы html. – reporter

Спасибо репортеру, это очень помогает –

ответ

Задача 1

Проблема заключается в том, что вы подменяют TableRow снова и снова в течение цикла. Таким образом, вам нужно переместить это за пределы цикла for. Вам нужно будет обновить скрипт для

var tableRow = ""; // moved outside the loop 
for(var i = 1; i<=5; i++){ 
    tableRow += "<tr>"; // appending <tr> 
    tableRow+= "<td>" + "JS Table" + "</td>"; 
    tableRow+= "</tr>";   
} 

document.getElementById("myTable").innerHTML = tableRow;

Задачи 2

Проблема приходит потому, что вы пытаетесь выполнить код до того, как дом визуализируются. Попробуйте обернуть его внутри функции onload т.е.

window.onload = function(){ 
    // your code here 
};

Для справки - https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

источник

2015-07-20 11:43:04 nikhil

<!DOCTYPE html> 
 
    <html> 
 
    <head>  
 

 
     <script> 
 
     window.onload = function(){ 
 
      
 
      var tableRow = ""; 
 
      for(var i = 1; i<=5; i++){ 
 
      tableRow += "<tr>"; 
 
      tableRow += "<td>" + "JS Table" + "</td>"; 
 
      tableRow += "</tr>";   
 
      } 
 

 
      document.getElementById("myTable").innerHTML = tableRow; 
 
     }; 
 
     </script> 
 

 
    </head> 
 

 
    <body> 
 

 
    <table id="myTable"></table> 
 

 
    </body> 
 
    </html>

источник

2015-07-20 11:46:41 num8er

var tableRow=""; 
 

 
for(var i = 1; i<=5; i++){ 
 
     tableRow += "<tr>"; 
 
     tableRow+= "<td>" + "JS Table" + "</td>"; 
 
     tableRow+= "</tr>"; 
 

 
    } 
 

 
    document.getElementById("myTable").innerHTML = tableRow;

<table id="myTable"></table>

источник

2015-07-20 11:46:48 Dhaval

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