テーブル内でのランダムな並べ変え

質問

全然知識がないのですがよろしくお願いします。
タグで
<table border="0">
<tr>
<td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">&nbsp;&nbsp;◆タイトル</font></td>
</tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td>
<td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td>
</tr>
<tr>
<td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">&nbsp;&nbsp;◆タイトル</font></td>
</tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td>
<td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td>
</tr>
<tr>
<td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">&nbsp;&nbsp;◆タイトル</font></td>
</tr><tr><td width="100" height="100"><img src="画像.jpg" width="100" height="100" border="0"></td>
<td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書</td>
</tr>
</table>

このようなテーブルがあって、その順番をページ更新でタイトル・画像・文書を一枠としてクルクルランダムに入れかえたいのですが、どうしたらいいでしようか？
今後、この一枠がドンドン増えて行って、それも含めて全ての枠をランダムに入れ替えたいのです。
jqueryで簡単にできるようなことは聞きましたが、私には知識がないので助けてください。
よろしくお願いします。
http://www.finefinefine.jp/web/kiji2068/
ここを見れとも言われたのですが、スクリプトは私には不明です・・・

回答No.1

LancerVII · ベストアンサー

こんにちは。

例にあるようなやり方であれば以下のようになると思います。
(HTMLのtrにclass属性を追加しています)
増やしていく場合はタイトル部分のtrにはclass="list"を追加してください。

====JavaScript
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery','1');</script>
<script type="text/javascript">
$().ready ( function() {
var array = [];
$('table tr.list').each ( function() {
array.push ( $(this) );
});
array.sort ( function() {
return Math.random() - Math.random();
});
$('table').empty();
for ( var i = 0; i < array.length; i ++ ) {
$('table')
.append('<tr>' + array[i].html() + '</tr>')
.append('<tr>' + array[i].next().html() + '</tr>');
}
});
</script>

==== HTML
<table border="0">
<tr class="list">
<td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">&nbsp;&nbsp;◆タイトル１</font></td>
</tr>
<tr>
<td width="100" height="100"><img src="1.jpg" width="100" height="100" border="0"></td>
<td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書1</td>
</tr>
<tr class="list">
<td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">&nbsp;&nbsp;◆タイトル２</font></td>
</tr>
<tr>
<td width="100" height="100"><img src="2.jpg" width="100" height="100" border="0"></td>
<td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書2</td>
</tr>
<tr class="list">
<td colspan="3" width="100%" bgcolor="#FF1493"><font color="#ffffff">&nbsp;&nbsp;◆タイトル３</font></td>
</tr>
<tr>
<td width="100" height="100"><img src="3.jpg" width="100" height="100" border="0"></td>
<td colspan="2" width="380" height="100" valign="top" align="left" bgcolor="#F8E0F7">文書3</td>
</tr>
</table>

お礼

早々の回答ありがとうございます！
思い通りの動きです。もう一人ではわからなくてクチャクチャになってしまいましたｗ
感謝感謝！です

回答No.4

Ogre7077

> 個別に指定すると同じアドレスを一枠に複数書くことになる

個別に指定することを強くお勧めします。
しかしそれでもやりたいのなら、参考URLにてヒントが見つかるかもしれません。

参考URL：

http://www.google.co.jp/search?q=display+table-cell+link

お礼

助言ありがとうございます！
参考サイトをじっくりと見て一度やってみたいと思います。
シンプルなように思えて案外複雑なんですねぇ

私的にもシンプルにミスを減らすことを考えていただけなので
素直に個別に指定する方向で行こうと思います。

回答No.3

Ogre7077

#2 にて大ボケをかました様で失礼しました。今度は動作確認しております。

<script>
function sortTable(){
var tab = document.getElementById('kurukuru');
var bodies = Array.prototype.slice.apply(tab.getElementsByTagName('tbody'));
for (var r = bodies.length; r > 0; r--) {
var index = Math.floor(r * Math.random());
tab.appendChild(bodies[index]);
bodies.splice(index, 1);
}
}
window.onload = sortTable;
</script>
<table border id=kurukuru>
<tbody><tr><td colspan=2>タイトル1<tr><td><img alt=画像1><td>文書1</tbody>
<tbody><tr><td colspan=2>タイトル2<tr><td><img alt=画像2><td>文書2</tbody>
<tbody><tr><td colspan=2>タイトル3<tr><td><img alt=画像3><td>文書3</tbody>
</table>

jQuery はなんら問題なく導入できますし、今後も似たような機能追加をなさるならむしろ積極的に行うべきです。ただこの程度の短い処理のために jQuery とプラグインを導入して・・・というのは個人的に面倒と感じています。
念のため、上記のスクリプト部分を jQuery で書き換えた場合も書いてみました。こうするとブラウザ間の互換性が向上します。具体的には firefox で動かないボケが未然に防げるぐらい。

<script src="jquery.min.js"></script> <!-- 当該ファイルを配置すること -->
<script>
$(function(){
var bodies = $('table#kurukuru > tbody').get();
for (var r = bodies.length; r > 0; r--) {
var index = Math.floor(r * Math.random());
$('table#kurukuru2').append(bodies[index]);
bodies.splice(index, 1);
}
});
</script>

お礼

対応ありがとうございます！
jqueryでない方に関しては完全に動きました～
でも、jqueryはなぜか動かない感じです。ごめんなさい自分でわかればいいのですが・・・

もし、よろしければこの<tbody>間でのリンク指定できればと思っているのですが
a{display:block;width:100%;height:100%;}
a:hover {background-color:#ffffff;}
このようにスタイル指定で一部をリンクすることはできるのですが、画像部分を含むことができないので、個別に指定すると同じアドレスを一枠に複数書くことになるのですがよろしければお知恵をお借りしたいです。

回答No.2

Ogre7077

行ごとの入れ替えではなく、複数行単位の入れ替えとなると、少々面倒な処理になってしまい保守性がよろしくありません。
なので、入れ替えの単位ごとに TBODY 要素で行をまとめれば、かなり簡単になると思います。

この程度であれば jQuery を導入するまでもないでしょう。

<html>
<head>
<script>
function sortTable(){
var tab = document.getElementById('kurukuru');
var bodies = Array.prototype.slice.apply(tab.getElementsByTagName('tbody'));
for (var rest=bodies.length; rest>0; rest--) {
var index = rest * Math.random() | 0;
tab.appendChild(bodies.splice(index, 1)[0]);
}
}
document.body.onload = sortTable;
</script>

<body>

<table border id=kurukuru> <!-- 並べ替え対象にIDをつけて、処理を簡単に -->
<tbody> <!-- ここに TBODY 要素をはさむ -->
<tr><td colspan=2>タイトル1
<tr><td><img alt=画像1><td>文書1
</tbody>
<tbody>
<tr><td colspan=2>タイトル2
<tr><td><img alt=画像2><td>文書2
</tbody>
<tbody>
<tr><td colspan=2>タイトル3
<tr><td><img alt=画像3><td>文書3
</tbody>
</table>

</body>
</html>

お礼

ありがとうございます。
保守とかが私には良くわからないですが、jQueryだと問題あるのでしょうか？
ゴメンなさい知識不足なので・・・
テーブル全体に渡ってリンク処理することすらあたふたしてる有り様です。
今回貼って頂いたソースでFIREFOXで動かそうとしましたが動きませんでした。
私の環境や理解力に問題があるかもしれないです。申し訳ありません
何となくですが、<tbody></tbody><tbody></tbody>間がランダムにクルクル回る感じですよね