2017-01-08 5 views
0

でのdocument.writeで表示されるようにHTMLテーブルを取得しようとしています。私は間違って何をしていますか?私はdocument.writeを使用してJavascriptでテーブルを作成する必要があります。どんな助けもありがとう!は、このコードが出て動作していない理由を私は理解することはできません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> 
+1

は 'document.write'を使用しないでください!なぜカンマを使っているのですか?なぜあなたは '未定義 'と書いていますか? – Li357

+0

まず、ブラウザのdevツールコンソールでエラーを調べます。また、ロジックの問題が、コンソールが、私は 'にdocument.write()を使用することはお勧めしません – charlietfl

+0

にあなたを指します構文問題を抱えている;'しかし、これは動作していない理由は、あなたの 'のための()'ループです。 ';'を ';'例 'i = 0;に置き換えます。 i <行; @ ++ ' – NewToJS

答えて

2

[OK]を、今では、あなたが主題についてthisを参照して、document.writeの完全な耳を得ました。あなたの構文は2つの明白な例外を除いて良いです一見

は、ブラウザは、あなたが完成している知っているのでforループ文の後速記3文の形式と、私たちが持っているようですのでforループでは、我々はセミコロンを使用することですステートメントは;です。

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

他の明白な誤りは、あなたが最後に関数を呼び出している方法です、それは次のようになります。

table(2,4); 

次のスニペットは、作成するための別の方法を示していますテーブル。詳細はスニペットでコメントしました。

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>

関連する問題