0

目前，这会为单词列表创建表格，但仅在一列中。如何让它打印到 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');
4

2 回答 2

2

现在线

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');

这应该仅将“tr”附加到元素 0、4、8、12、16 和元素 3、7、11、15、19（在 20 个元素的列表中——因为您提到了 4x5表我要做什么）。缺少 html 我无法证明它有效，但希望它有所帮助。

于 2012-07-12T12:20:15.703 回答
0

你想要多行多列。实现这一点的最简单方法是遍历这两个，而不是遍历单词列表。

这看起来像这样：

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>
}

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

我看到你删除了你的评论，但是要随机化哪个项目去哪里，你需要做的就是使用sortand来打乱列表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()函数（与 相同$()）为您创建节点。这样，您就可以访问节点的所有 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');

演示

您可以在此处查看实时示例。

于 2012-07-12T12:32:53.237 回答