javascript 2次元ソートテーブル code_javascriptスキル

機能は次のとおりです。
1. 並べ替え機能: 行ヘッダーまたは列ヘッダーをクリックすると、逆順に並べ替えられます。
2. セルをダブルクリックして並べ替えます。入力操作を実行し、入力ボックスがフォーカスを失うと、新しいデータが保存されます。
3. ランダム関数: ページが更新されるたびに、テーブル内のデータが異なります。

完全なソース コードは次のとおりです:

2次元ソートテーブル<title> </title> <style type="text/css"> * { font-family: Tahoma, Arial, Serif; font-size: 14; } body { text-align: center; min-width: 760px; } #main { width: 720px; margin: 0 auto; text-align: left; } p { border-bottom: dotted 1px #e63; font-size: 24px; font-family: Arial; font-weight: bold; } /* 设置表格样式 */table { text-align: center; border: solid 1px #4682b4; width: 80%; background-color: #4682b4; } th { background-color: #6495ed; cursor: pointer; color: White; height: 30px; } /* 配上单元格样式以后，表格呈现出细线的边框 */td { background-color: #fff; padding: 4px; } /* 深蓝色（鼠标经过） */.activecol { background-color: #005eae; } </style> <div id="main"> <p> 2次元ソートテーブル</p> <table id="tb" border="0" cellpadding="1" cellspacing="1"> <thead> <tr> <th>   </th> <th onclick="sortColumn(1)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列1 </th> <th onclick="sortColumn(2)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列2 </th> <th onclick="sortColumn(3)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列3 </th> <th onclick="sortColumn(4)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列4 </th> <th onclick="sortColumn(5)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列5 </th> <th onclick="sortColumn(6)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 列6 </th> </tr> </thead> <tbody> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行1 </th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行2 </th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行3 </th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行4 </th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> </tr> <tr> <th onclick="sortRow(this)" onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)"> 行5 </th> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> <td onmousemove="setActiveCol(this)" onmouseout="setLoseFocusCol(this)" ondblclick="inputValue(this)">   </td> </tr> </tbody> </table> <div style="margin-top: 50px; background-color: #eeedf0; width: 80%; font-size: 12px;"> 説明: <br> 1. ソート機能: 行ヘッダーまたは列ヘッダーをクリックして正の順序でソートし、もう一度クリックすると逆順にソートします。 2. 変更機能: セルをダブルクリックして入力操作を実行すると、入力ボックスがフォーカスを失うと、新しいデータが保存されます。 3. ランダム機能: ページを更新するたびに、テーブル内のデータが異なります <br> <br> <br> </div> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]