完整解决方案

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'（列）。为了在四列网格中打印出单词，你必须每隔四个单词附加一个'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');

这应该只向元素0,4,8,12,16和'/ tr'添加'tr'到元素3,7,11,15,19（在20个元素的列表中 - 因为你提到了我正在使用的4x5表格。缺乏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>
}

此策略允许您轻松更改表格中的行数和列数（即使列表的长度不是列数的精确倍数）。

我看到你删除了你的评论，但是随机化哪个项目在哪里，您需要做的就是使用sort和random对列表进行洗牌：

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

如果您需要保留原始列表，请先使用slice创建列表副本：

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(); });

完整解决方案

由于您已经在使用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。

JQuery / JavaScript - 从单词列表创建表

2 个答案:

完整解决方案

演示