テーブル内のランダムな要素を生成する

Question

私は9x9テーブルを作成しました。そして私はいくつかの数字でそれを埋める。私はまた、bgcolorと1行目と1列目を強調表示し、それは固定されたままになる、つまりシャッフルされません。

<table border="2px" width="300px"id="mytable" > 
<tr bgcolor="#FF0000"> 
<td></td> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> 
<td>8</td></tr> 
<tr > 
<td bgcolor="#FF0000">1</td><td>5</td><td>6</td><td>1</td><td>7</td> <td>8</td><td>3</td> 
<td>2</td><td>4</td> 
</tr> 
<tr> 
<td bgcolor="#FF0000">2</td><td>3</td><td>4</td><td>7</td><td>8</td><td>5</td><td>1</td> 
<td>6</td><td>2</td> 
</tr> 
<tr> 
<td bgcolor="#FF0000">3</td><td>1</td><td>3</td><td>4</td><td>2</td><td>6</td><td>7</td> 
<td>8</td><td>5</td></tr> 
<tr> 
<td bgcolor="#FF0000">4</td><td>2</td><td>4</td><td>7</td><td>5</td><td>1</td><td>3</td> 
<td>8</td><td>6</td></tr> 
<tr> 
<td bgcolor="#FF0000">5</td><td>8</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> 
<td>2</td><td>1</td></tr> 
<tr> 
<td bgcolor="#FF0000">6</td><td>2</td><td>6</td><td>3</td><td>5</td><td>1</td><td>4</td> 
<td>8</td><td>7</td> 
</tr> 

<tr> 
<td bgcolor="#FF0000">7</td><td>1</td><td>3</td><td>5</td><td>8</td><td>6</td><td>7</td> 
<td>2</td><td>4</td> 
</tr> 
<tr> 
<td bgcolor="#FF0000">8</td><td>2</td><td>1</td><td>4</td><td>5</td><td>8</td><td>7</td> 
<td>6</td><td>3</td> 
</tr> 
</table> 

のjQuery：

は、ここに私のコードです

$(document).click(function(){ 
var $firstCells = $("#mytable tr:not(:first-child) td:not(:first-child)"), 
    $copies = $firstCells.clone(true); 

[].sort.call($copies, function() { return Math.random() - 0.5; }); 

$copies.each(function(i){ 
    $firstCells.eq(i).replaceWith(this); 
}); 

}); 

しかし、私はそれをクリックしたときにこれだけ働いています。要素をクリックせずにシャッフルする方法。誰でも私に教えてくれますか？

Answer 1

は、これは、文書の準備ができた直後にスクリプトが実行になります

〜$（関数（）{〜の代わりに、$（文書）.click（関数（）{使用してみてください。