2016-12-16 2 views
0

학교용 프로그램 개요 배열을 사용하여 테이블을 만들려고합니다. 코스 제목 옆에 두 번째 배열 (num) 줄을 어떻게 만들 수 있습니까? 지금 바로 아래에 같은 열에 스태킹 중입니다 ...자바 스크립트 배열 테이블을 만들려면

<script> 

var titl = ["Oral Communication","Applications/Concepts","SQL Programming","HTML and Dreamweaver","Javascript","Flash","XML","Cascading Style Sheets","XSL","ASP.NET","PHP/MySQL","Windows Operating Systems","Digital Imaging with Photoshop","Web Development Internship"]; 
var num = ["ENG171","CIT110","CIT236","CMT111","CMT113","CMT115","CMT117","CMT125","CMT211-see note*","CMT215","CMT241","CIT268","VMA105","CMT299"]; 

document.write('<table>') 
document.write('<tr><th>Web Development Concentration Courses</th></tr>'); 

for (var i = 0; i < titl.length; i++) 
{ 
    document.write('<tr><td>' + titl[i] + '</td></tr>'); 
} 

for (var j = 0; j < num.length; j++) 
{ 
    document.write('<tr><td>' + num[j] + '</td></tr>'); 
} 
document.write('</table>'); 

</script> 
+0

당신이 옆에, 열 2면을'num'의 열 1 'titl'의 요소와 요소를 가진 뜻 두 개의 루프를 결합 6,? –

+0

예 정확합니다! 고맙습니다! – hendro3

+0

@ hendro3 답변을 수락 하시겠습니까? 답변 옆에있는 확인 버튼을 클릭하면됩니다. 당신은 오직 하나만 할 수있을 것입니다. –

답변

2

HTML을 구성 할 때 물건을 분할 할 수 없습니다. 또한, 위험하므로 document.write을 사용하지 마십시오.

또한 주요 해결 방법은 루프를 결합하는 것입니다. 나는 동일하게 두 배열의 길이를 확인하여 그 일을하고있다 :

var titl = ["Oral Communication", "Applications/Concepts", "SQL Programming", "HTML and Dreamweaver", "Javascript", "Flash", "XML", "Cascading Style Sheets", "XSL", "ASP.NET", "PHP/MySQL", "Windows Operating Systems", "Digital Imaging with Photoshop", "Web Development Internship"]; 
 

 
var num = ["ENG171", "CIT110", "CIT236", "CMT111", "CMT113", "CMT115", "CMT117", "CMT125", "CMT211-see note*", "CMT215", "CMT241", "CIT268", "VMA105", "CMT299"]; 
 

 
var finalHTML = '<table>'; 
 
finalHTML += '<tr><th>Web Development Concentration Courses</th></tr>'; 
 

 
if (titl.length == num.length) 
 
    for (var i = 0; i < titl.length; i++) { 
 
     finalHTML += '<tr><td>' + titl[i] + '</td><td>' + num[i] + '</td></tr>'; 
 
    } 
 

 
finalHTML += '</table>'; 
 

 
document.getElementById("container").innerHTML = finalHTML;
<div id="container"></div>

미리보기

preview

또한, <th>colspan="2" 줄 것입니다 제공 좋은 결과 :

preview

0

for (var i = 0, j= 0; i < titl.length || j < num.length; i++,j++) 
{ 
    document.write('<tr><td>' + titl[i] + '</td> <td>' + num[i] + '</td></tr>'); 

} 
+0

당신은 'j'를 증가 시키거나 사용하지 않습니다. –

+0

이것은 멋지게 작동했습니다! :) – hendro3

+0

그건 아무것도 아니었다 .... – Viney