人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascriptの質問です
以下のコードでtableタグ内のtrをシャッフルしたのですが
それを元どおりの順に戻したいのですがどのようなjavascriptを組めばいいでしょうか?

function shuffle() {
var a = document.getElementsByTagName("TABLE");
var b = Array.prototype.slice.apply(a[0].getElementsByTagName("tr"));
for (var c = b.length; c > 0; c--) {
var d = Math.floor(c * Math.random());
a[0].appendChild(b[d]);
b.splice(d, 1);
}
}

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● きゃづみぃ
●100ポイント

元どおりの順番といわれても その順番がどのような順番なのか わからなければ戻せないと思います。

ソートする前に 前の順番を配列に保存してから ソートし、戻すときは、その配列から取得して戻せばいいのではないでしょうか?


2 ● a-kuma3
●400ポイント ベストアンサー

以前の質問 http://q.hatena.ne.jp/1386097266 で提示されていた jsFiddle のコードを、ちょっといじってみました。
http://jsfiddle.net/k62Cu/2/

// テーブルの内容を保存しておく変数
var table_backup = "";

function sortTable(){
 var tabs = document.getElementsByTagName('TABLE');

 // 最初の一回目で、テーブルの内容を保存する
 if (table_backup == "") {
 table_backup = tabs[0].innerHTML;
 console.log(table_backup);
 }

 var bodies = Array.prototype.slice.apply(tabs[0].getElementsByTagName('tr'));
 for (var r = bodies.length; r > 0; r--) {
 var index = Math.floor(r * Math.random());
 tabs[0].appendChild(bodies[index]);
 bodies.splice(index, 1);
 }
}

// テーブルの内容を元に戻す関数
function restoreTable() {
 if (table_backup != "") {
 var tabs = document.getElementsByTagName('TABLE');
 tabs[0].innerHTML = table_backup;
 }
}

テーブルをシャッフルする関数で、最初に呼ばれたときにテーブルの内容を保存しておきます。
テーブルの内容を元に戻す関数で、保存した内容があれば、テーブルに戻します。


takaniiさんのコメント
すいません、シャッフルボタンと元に戻すボタンをひとつにまとめるにはどうすればいいでしょうか?

a-kuma3さんのコメント
>> シャッフルボタンと元に戻すボタンをひとつにまとめるにはどうすればいいでしょうか? << こんな感じで、どうでしょう。 http://jsfiddle.net/s52ng87d/1/ 回答に書いたコードを活かしてますが、HTML の関数呼び出しや、関数の引数、処理内容などを、ちょこちょこといじってます。

takaniiさんのコメント
おおおお!ありがとうございます! あの、これをボタンじゃなくて画像アイコン押したら変えれるようにするにはどこを変えればいいのでしょうか?

a-kuma3さんのコメント
>> これをボタンじゃなくて画像アイコン押したら変えれるようにするにはどこを変えればいいのでしょうか? << こんな感じで。 http://jsfiddle.net/s52ng87d/2/ -BUTTON タグを IMG タグに変更 -それぞれの関数で .innerHTML を変えていたのを .src を変えるように変更 です。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ