JQuery/JavaScript - 단어 목록에서 표 만들기

Question

지금은 단어 목록에 대한 표가 하나의 열에 만 만들어집니다. 4x5 테이블로 인쇄하려면 어떻게해야합니까?

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"]; 
var innerTable = ''; 
for (var i = 0, len = listOfWords.length; i < len; i++) { 
innerTable += '<tr><td>'+listOfWords[i]+'</td></tr>'; 
} 
$('<table>'+innerTable+'</table>').appendTo('body'); 

Answer 1

는 현재 라인

innerTable += '<tr><td>'+listOfWords[i]+'</td></tr>'; 

새로운 'TR'(행) 및 각각의 새로운 단어에 대한 'TD'(열)을 모두 만드는 것입니다. 4 개의 열이있는 표에서 단어를 인쇄하려면 4 번째 단어마다 'tr'을 추가해야합니다.

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"]; 
var innerTable = ''; 
for (var i = 0, len = listOfWords.length; i < len; i++) { 
    if ((i%4)==0){ 
     innerTable += '<tr>'; 
    } 
    innerTable += '<td>'+listOfWords[i]+'</td>'; 
    if ((i%4)==3){ 
     innerTable += '</tr>'; 
    } 
} 
$('<table>'+innerTable+'</table>').appendTo('body'); 

이것은 15 요소 만 0, 4, 8, 12, 16는 'TR'및 요소 3, 7, 11에 '/ TR'를 추가한다 : 짧은 해킹

, 19 (20 요소의 목록에 - 당신이 4 x 5 테이블을 언급 한 이래로 내가 할 일이 무엇인지). html이 부족하여 작동한다는 것을 증명할 수는 없지만 잘하면 도움이됩니다.

Answer 2

여러 개의 행과 여러 개의 열이 있어야합니다. 이를 달성하는 가장 쉬운 방법은 단어 목록 대신에 두 가지 모두를 반복하는 것입니다.

이는 다음과 같이 보일 것이다 :

var rows = 4; 
var cols = 5; 

for (var row=0; row < rows; row++) { 
    // Open the <tr> 
    for (var col=0; col < cols; col++) { 
     index = (row*cols) + col; 
     // Add a <td> containing listOfWords[index] 
    } 
    // Close the <tr> 
} 

이 전략은 쉽게 목록의 길이의 정확한 배수가 아닌 경우에도 테이블 (에 행과 열의 수를 변경할 수 있습니다을 열의 수).

은 당신이 당신의 코멘트를 삭제 볼 수 있지만 에 항목이 당신이 할 필요가 및 random 사용하여 목록을 뒤섞이고, 이동하는을 무작위 : 원래 목록이 필요한 경우로

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"]; 
listOfWords.sort(function() { return 0.5 - Math.random(); }); 

을

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"]; 
var shuffledWords = listOfWords.slice(0); 
shuffledWords.sort(function() { return 0.5 - Math.random(); }); 

전체 솔루션

: 보존, 첫 slice를 사용하여 목록의 복사본을 생성

이미 jQuery를 사용하고 있으므로 새 노드 (<tr>, <td> 등)를 만드는 가장 좋은 방법은 전체 HTML을 작성하는 것이 아니라 jQuery() function ($()과 동일)을 사용하여 노드를 만들 수 있습니다. 그렇게하면 노드의 모든 DOM 및 jQuery 함수에 액세스 할 수 있습니다 (예 : appendTo().

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"]; 
var shuffledWords = listOfWords.slice(0); 
shuffledWords.sort(function() { return 0.5 - Math.random(); }); 

var table = $('<table>'); // <-- creates a new jQuery object containing a <table> node 
var rows = 4; 
var cols = 5; 
var tr; 
var index; 

for (var row=0; row < rows; row++) { 
    tr = $('<tr>'); 
    for (var col=0; col < cols; col++) { 
    index = (row*cols) + col; 
    $('<td>').text(shuffledWords[index]).appendTo(tr); 
    } 
    tr.appendTo(table); 
} 

table.appendTo('body'); 

데모

당신은 live example here을 볼 수 있습니다

이 시도해보십시오.