JS テーブルのデータをシャッフルするには？

質問

JavaScript テーブルのデータをシャッフルするには？

ここに１つのテーブルがあります。
tbody td のセルデータをシャッフルするには どんなコードでできますか？
要は、テーブル内容をランダムに並べ替える、ということです。

＜仕様＞
・ボタンを押すごとに テーブル内を並べ替える
・thの内容は固定
・並べ替えるのは tbody tdの内容

[HTML]
<button id="button1">シャッフル</button>
<table id="table5" border="1">
<thead>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
<th>G</th>
<th>H</th>
<th>I</th>
<th>J</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>春</td>
<td>夏</td>
<td>秋</td>
<td>冬</td>
<td>朝</td>
<td>昼</td>
<td>番</td>
<td>花</td>
<td>鳥</td>
<td>風</td>
</tr>
<tr>
<th>2</th>
<td>月</td>
<td>天</td>
<td>地</td>
<td>人</td>
<td>愛</td>
<td>4.3</td>
<td>3.5</td>
<td>8.4</td>
<td>6.1</td>
<td>6.4</td>
</tr>
<tr>
<th>3</th>
<td>1.8</td>
<td>7.8</td>
<td>1.4</td>
<td>7.5</td>
<td>6.2</td>
<td>6.5</td>
<td>5.1</td>
<td>7.9</td>
<td>7.2</td>
<td>2.8</td>
</tr>
<tr>
<th>4</th>
<td>83</td>
<td>64</td>
<td>18</td>
<td>51</td>
<td>36</td>
<td>45</td>
<td>84</td>
<td>22</td>
<td>16</td>
<td>25</td>
</tr>
<tr>
<th>5</th>
<td>arm</td>
<td>bat</td>
<td>cat</td>
<td>dog</td>
<td>egg</td>
<td>fig</td>
<td>gal</td>
<td>hit</td>
<td>ink</td>
<td>joy</td>
</tr>
</tbody>
</table>

回答No.3

babu_baboo

}

//____________

Math.random()-.5

//

補足

つねに、１行目は漢字で５行目は英小文字という、
シャッフルに偏りがあります。
とりあえず、質問を閉じさせて頂きます。

回答No.2

babu_baboo

修正
<.5
を
-.5
に

補足

試行してみましたが・・・
参照先：https://jsfiddle.net/r3qpbv7t/

回答No.1

babu_baboo

[...table5.rows].map(a=>a.append(...[...a.querySelectorAll('td')].sort(()=>Math.random()<.5)));

お礼

ご回答ありがとうございます。

補足

試行してみたところ、
シャッフルされずにそのまま。
コンソールログに、エラーも出ませんでした。
（使用したブラウザは、Chrome 113.0.5672.127 ）