0

現時点では、これにより単語リストのテーブルが作成されますが、1 列のみです。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' (列) の両方を作成しています。単語を 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');

これは、要素0、4、8、12、16にのみ「tr」を追加し、要素3、7、11、15、19に「/tr」を追加する必要があります（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>
}

この戦略により、テーブル内の行数と列数を簡単に変更できます(リストの長さが列数の正確な倍数でなくても)。

コメントを削除したようですが、どのアイテムがどこに行くかをランダム化sortするには、 andを使用してリストをシャッフルするだけです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 に答える