table内要素のランダムな並び替え

JavaScript初心者の者です。

現在JavaScriptで様々な形の電卓を作ろうと考え、ある一定の文字数を入力後に、
table内に置いたボタンの配置がランダムに並び変わるようなものを制作しようと考えています。

電卓といいますか、作ろうとしてるものの他の要素はすべて完成しているのですが、
ただtableのボタンの配置をランダムに並び替える関数だけがどうしても作ることができません。
table内要素は3×3のボタンになっています。

ネットで調べてもtable内の要素をランダムに配置しなおす方法がどうしてもわからず、
何かヒントだけでもいただけないかと思い質問させていただきました。

よろしくお願いいたします。

No.2 ベストアンサー 回答者： yambejp 回答日時： 2012/10/26 11:41

とりあえずやってみた

<script>
function shuffleTable()
{
var n1=document.getElementById("t1").getElementsByTagName("td");
var n2=new Array();
for(var i=0;i<n1.length;i++){
n2.push(n1[i].cloneNode(true));
};
for(var i=n2.length -1;i>1;i--){
var j=parseInt(Math.random()*(i+1));
var k=n2[i];n2[i]=n2[j];n2[j]=k;
}
for(var i=n1.length -1;i>=0;i--){
var p=n1[i].parentNode;
p.insertBefore(n2[i],n1[i]);
p.removeChild(n1[i+1]);
};
}
</script>

<table id="t1">
<tr>
<td><input type="button" value="1"></td>
<td><input type="button" value="2"></td>
<td><input type="button" value="3"></td>
</tr>
<tr>
<td><input type="button" value="4"></td>
<td><input type="button" value="5"></td>
<td><input type="button" value="6"></td>
</tr>
<tr>
<td><input type="button" value="7"></td>
<td><input type="button" value="8"></td>
<td><input type="button" value="9"></td>
</tr>
</table>
<input type="button" value="shuffule" onclick="shuffleTable()">

この回答へのお礼

コードまでありがとうございます！
実行してみたところ、思った通りのものができました。

しかしながら中身をすべて理解しきれていないので、
１つ１つ理解したあとに実行してみようと思います。
ありがとうございました！

お礼日時：2012/10/26 12:31

No.1 回答者： Picosoft 回答日時： 2012/10/26 11:37

こんにちは。

どのようなボタンを配置しているのかわかりませんが、
ボタンはそのままで、表示させる文字(または画像)だけすり替えるという方法はいかがでしょうか。

普通のボタンであれば、
var buttonElement = document.getElementById("ボタンにつけたID"); //ボタンを取ってくる
buttonElement.value = "新たに表示させたい文字"; //表示する文字を設定
と書けばボタンに表示される文字を変えることができます。

buttonElementの取得方法はいろいろありますので、今のソースに合わせて変えてみてください。

この回答へのお礼

なるほど。
値を新たに挿入するという考え方はありませんでした。

その方向でも検討して作ってみます！
ご親切にありがとうございました！

お礼日時：2012/10/26 12:31