Попытка заставить HTML-таблицу появиться с document.write в Javascript

Я не могу понять, почему этот код не работает. Что я делаю не так? Мне нужно использовать document.write, чтобы создать таблицу в Javascript. Любая помощь будет оценена!Попытка заставить HTML-таблицу появиться с document.write в Javascript

<!DOCTYPE html> 

<html> 

<head> 
<title></title> 
</head> 

<body> 

<script type="text/javascript"> 

var rows; 
var cols; 

function table(rows, cols){ 
document.write('<table border="1">'); 
    for (i=0, i < rows, i++){ 
    document.write('<tr>'); 

    for (j=0, j < cols, j++) { 
    document.write('<td>' + 'cell' + '</td>'); 
    } 
    document.write('</tr>'); 
} 
document.write('</table>'); 
} 

document.write (table(2, 4)); 

</script> 

</body> 

</html>

источник

2017-01-08 nawtydoggg

Не используйте 'document.write'! Почему вы используете запятую ?! Почему вы пишете 'undefined'? – Li357

Начните с рассмотрения ошибок в консоли браузера dev tools. У вас есть логические проблемы, но также проблемы с синтаксисом, которые консоль укажет на – charlietfl

. Я не рекомендую использовать 'document.write();' но причина, по которой это не работает, связана с вашими циклами 'for()'. Замените ',' '' 'example' i = 0; я <строк; i ++ ' – NewToJS

Хорошо, теперь вы получили ухо полный document.write, обратитесь к this о предмете.

На первом взгляде вашего синтаксис хорош с двумя вопиющими исключениями является то, что в for цикли, мы используем точку с запятой, потому что for цикл подобен сокращенным видом 3 заявления и то, что мы имеем после заявления так браузеры знают вы закончили заявив, что это ;.

for(let i=0; i < rows; i++) {...}

Другой свирепо ошибка, как вы вызываете функцию в конце концов, он должен быть:

table(2,4);

Следующий фрагмент демонстрирует альтернативный способ создания столы. Подробности комментируются в Snippet.

SNIPPET

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 

 
    <!--We don't have to add "type="text/javascript"... 
 
<script> tags anymore--> 
 
    <script> 
 
    var rows; 
 
    var cols; 
 

 
    function createTable(rows, cols) { 
 
     /* Using creatElement() method is simple and fast... 
 
     || ...but be mindful that even though you created... 
 
     || ...an element, it's not going to showup until... 
 
     || ...it is added to the DOM. 
 
     */ 
 
     var table = document.createElement('table'); 
 

 
     /* At this point we have a <table> that's... 
 
     || ..."floating around". This is the most... 
 
     || ...advantageous time to add any attributes... 
 
     || ...and other elements. It's costly to add... 
 
     || ...to add to the DOM, so while any element... 
 
     || ...is detached from the DOM (i.e. <table>,)... 
 
     || ...add as much as you are able to before... 
 
     || ...adding it to the DOM. 
 
     */ 
 
     table.setAttribute('border', '1'); 
 

 
     /* for loop = 3 statements + 2 semicolons */ 
 
     // let ~i~ equal 0; 
 
     // while ~i~ is less than ~rows~ continue looping; 
 
     // at the end of a loop increment ~i~ by 1; 
 
     for (let i = 0; i < rows; i++) { 
 

 
      // Now we have a detached <tr>... 
 
      var tRow = document.createElement('tr'); 
 

 
      // ...which moves on to an inner loop 
 
      for (let j = 0; j < cols; j++) { 
 

 
      // A detached <td> 
 
      var tData = document.createElement('td'); 
 

 
      // While <td> is detached, let's add text 
 
      tData.textContent = 'Cell'; 
 

 
      /* appendChild() method will add the <td>... 
 
      || ...to the <tr>. This inner for loop will... 
 
      || ...continue to add <td> to this <tr>... 
 
      || ...as many times the number of ~cols~... 
 
      || ...That was set by this statement: 
 
      || j < cols; and it's perpetuated by this: 
 
      || j++ 
 
      */ 
 
      tRow.appendChild(tData); 
 
      } 
 
      /* Once the <tr> has completed all of the... 
 
      || inner loops, <tr> is now added to <table>... 
 
      || ...That is one complete loop of the outer 
 
      || ...loop. That's one <tr> filled with <td>... 
 
      || ...This whole cycle will go on until... 
 
      || ...whatever number ~rows~ is. 
 
      */ 
 
      table.appendChild(tRow); 
 
     } 
 
     /* After the last outer loop, the <table> is... 
 
     || ...completed and added to the <body> which... 
 
     || ...already is attached to the DOM, thus... 
 
     || ...<table> is in the DOM as well. 
 
     */ 
 
     document.body.appendChild(table); 
 
     } 
 
     // Call the function and pass 2 and 4. 
 
    createTable(2, 4); 
 
    </script> 
 

 
</body> 
 

 
</html>

источник

2017-01-08 03:21:58 zer00ne

Попытка заставить HTML-таблицу появиться с document.write в Javascript

ответ

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