テーブルを順番通りに直すやつを外部で読み込みたい。
テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
//本文
<table id="sort_table">
<tr>
<th>No</th>
<th>全角項目</th>
<th>数値項目</th>
<th>カンマ</th>
</tr>
<tr><td>1</td><td>かきくけこ</td><td>1</td><td>1,000</td></tr>
<tr><td>2</td><td>さしすせそ</td><td>10</td><td>10,000</td></tr>
<tr><td>3</td><td>あいうえお</td><td>100</td><td>2,000</td></tr>
<tr><td>4</td><td>カキクケコ</td><td>2001</td><td>3,000</td></tr>
<tr><td>5</td><td>アイウエオ</td><td>2002</td><td>20,000</td></tr>
<tr><td>6</td><td>サシスセソ</td><td>2003</td><td>11,000</td></tr>
<tr><td>7</td><td>一丁目</td><td>1.234</td><td>12,000</td></tr>
<tr><td>8</td><td>二丁目</td><td>12.34</td><td>30,000</td></tr>
<tr><td>9</td><td>三丁目</td><td>123.4</td><td>31,000</td></tr>
<tr><td>10</td><td>１丁目</td><td>0.001</td><td>32,000</td></tr>
<tr><td>11</td><td>２丁目</td><td>0.002</td><td>400,000</td></tr>
<tr><td>12</td><td>３丁目</td><td>0.003</td><td>50</td></tr>
</table>
<style>
#sort_table {
border-collapse:collapse;
}
#sort_table td {
border:1px solid lightgray;
}
#sort_table th {
cursor:pointer;
background-color:lightgray;
}
</style>
//javascript
<script>
window.addEventListener('load', function () {
let column_no = 0; //今回クリックされた列番号
let column_no_prev = 0; //前回クリックされた列番号
document.querySelectorAll('#sort_table th').forEach(elm => {
elm.onclick = function () {
column_no = this.cellIndex; //クリックされた列番号
let table = this.parentNode.parentNode.parentNode;
let sortType = 0; //0:数値 1:文字
let sortArray = new Array; //クリックした列のデータを全て格納する配列
for (let r = 1; r < table.rows.length; r++) {
//行番号と値を配列に格納
let column = new Object;
column.row = table.rows[r];
column.value = table.rows[r].cells[column_no].textContent;
sortArray.push(column);
//数値判定
if (isNaN(Number(column.value))) {
sortType = 1; //値が数値変換できなかった場合は文字列ソート
}
}
if (sortType == 0) { //数値ソート
if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート
sortArray.sort(compareNumberDesc);
} else {
sortArray.sort(compareNumber);
}
} else { //文字列ソート
if (column_no_prev == column_no) { //同じ列が2回クリックされた場合は降順ソート
sortArray.sort(compareStringDesc);
} else {
sortArray.sort(compareString);
}
}
//ソート後のTRオブジェクトを順番にtbodyへ追加（移動）
let tbody = this.parentNode.parentNode;
for (let i = 0; i < sortArray.length; i++) {
tbody.appendChild(sortArray[i].row);
}
//昇順／降順ソート切り替えのために列番号を保存
if (column_no_prev == column_no) {
column_no_prev = -1; //降順ソート
} else {
column_no_prev = column_no;
}
};
});
});
//数値ソート（昇順）
function compareNumber(a, b)
{
return a.value - b.value;
}
//数値ソート（降順）
function compareNumberDesc(a, b)
{
return b.value - a.value;
}
//文字列ソート（昇順）
function compareString(a, b) {
if (a.value < b.value) {
return -1;
} else {
return 1;
}
return 0;
}
//文字列ソート（降順）
function compareStringDesc(a, b) {
if (a.value > b.value) {
return -1;
} else {
return 1;
}
return 0;
}
</script>
let、var、constはfunctionの中で使うと、ローカル変数となってしまいます。
グローバル変数にするにはどのようにしたらよいのでしょうか。
しかし、let table、let tbodyに対応する関数がございません。
もう八方塞がりです。
jsの部分のみご記述ください。
補足
遅くなりました。ソースはこんな感じです。 <form name="form1"> <table> <tr> <th id="jap" onClick="doSort(jap)">国語</th> <th id="eng" onClick="doSort(eng)">英語</th> </tr> </table> <table> <tr> <td>70点</td> <td>54点</td> </tr> <tr> <td>83点</td> <td>79点</td> </tr> </table> </form> 今回はソートはできているのでソートのJavaScriptソースは省略します。 イメージは、<th>をクリックすると画面を再表示し、ソート結果を表示する感じです。 よろしくお願いします。