LoginSignup
11
14

More than 5 years have passed since last update.

テーブル内のtd要素をランダムに表示する

Posted at

JavaScriptはPHPのshuffle()関数みたいのがないので、下記アルゴリズムに則ってシャッフルしました。
今回はtd要素に対して書いていますけど、他の要素(例えば、li要素でリストをシャッフルとか)でも基本同じです。

配列内ランダム並び換えアルゴリズム
http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>テーブル内のtd要素をランダムに表示</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
  var tdElem = $('table.list td');
  var td_array = [];

  /* td要素を配列に取得 */
  tdElem.each (function() {
    td_array.push($(this).html());
  });

  /* 配列をシャッフルする */
  var n = td_array.length;
  for(var i = n - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var tmp = td_array[i];
    td_array[i] = td_array[j];
    td_array[j] = tmp;
  }

  /* td要素に配列の値を戻す */
  tdElem.each (function(i) {
    $(this).html(td_array[i]);
    i++;
  });
});
</script>
</head>
<body>
<table border="1" class="list">
  <tr>
    <td><strong>1</strong></td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
  </tr>
</table>
</body>
</html>
11
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
14