JQuery - 從單詞列表生成網格

Question

當前，該腳本從列表中獲取單詞並生成一個網格，每次給出單詞隨機位置。當生成這些單詞時，我希望它們被分割成單獨的字符，並放入彼此相鄰的單元格中，這樣該單詞仍然有意義 - 我該怎麼做？

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

var table = $('<table class="tablestyle">'); 
var rows = 6; 
var cols = 2; 
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'); 

$('<table>' + innerTable + '</table>').appendTo('body'); 

Answer 1

我說得對不對假設你想要一個新的行中的每個字，並在字的信，你想要一個新的細胞？

試試這個：

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

var tbl = document.createElement('table'); 
tbl.style.border='solid 1px silver'; 

for (var i = 0; i < shuffledWords.length; i++) 
{ 
    var word = shuffledWords[i]; 
    var row = document.createElement('tr'); 

    for (var j = 0; j < word.length; j++) 
    { 
     var cell = document.createElement('td'); 
     cell.style.border='solid 1px silver'; 

     cell.innerText = word[j]; 
     // IF FIREFOX USE cell.textContent = word[j]; INSTEAD 
     row.appendChild(cell); 
    } 

    tbl.appendChild(row);  
} 

document.body.appendChild(tbl); 

http://jsfiddle.net/YJjkB/1/