2017-01-08 2 views
0

이 코드가 효과적이지 않은 이유를 알 수 없습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? Javascript로 표를 만들려면 document.write을 사용해야합니다. 어떤 도움을 주시면 감사하겠습니다! 당신이 document.write의 전체 귀를 가지고 지금자바 스크립트에서 document.write와 함께 HTML 표를 표시하려고 시도합니다.

<!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 도구 콘솔의 오류를보고 시작하십시오. 당신은 논리 문제를 가지고 있지만 콘솔이 당신에게 가리킬 문법 문제도 있습니다. – charlietfl

+0

'document.write();를 사용하지 않는 것이 좋습니다. 그러나 이것이 작동하지 않는 이유는'for()'루프 때문입니다. ','를';'example 'i = 0;로 대체하십시오. i <행; i ++' – NewToJS

답변

2

좋아, 주제에 대해 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>