テーブルを順番通りに直すやつを外部で読み込みたい。

質問

テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
//本文
<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の部分のみご記述ください。

回答No.3

retorofan

＞タグを見つけるのに時間がかかってしまいます。

そうなると、全面的にコードを作り直したい。
そういうことでしょうか？

補足

僕がいっているのは、cssは直書き非推奨なので、
javascriptも避けたいと思ったからです。
全面的にコードを変えるしか方法はないのですか。
もしその場合でしたら、
innnerhtmlなり、何でもいいので、表面に書く方法を教えてください。
但しalertタグやconsole.log、windonw.openなどはなしです。

回答No.2

retorofan

No.1です。
追記
＞let table、let tbodyに対応する関数がございません。
JSファイル内で、
let table = this.parentNode.parentNode.parentNode;
let tbody = this.parentNode.parentNode;
としてアクセスできるので、あらためて用意する必要はありません。

補足

但し、これだとコードが長くなってしまい、
タグを見つけるのに時間がかかってしまいます。
だからこそ、外部にする必要があるのです。

回答No.1

retorofan

質問１
＞let、var、constはfunctionの中で使うと、ローカル変数となってしまいます。
グローバル変数にするにはどのようにしたらよいのでしょうか。
しかし、let table、let tbodyに対応する関数がございません。

回答１
グローバル変数にするには、２通りあります。
・functionの外に記述する
・functionの中であれば、var let constを付けない

ただし、この質問内容ですと、あえてグローバル変数にする
必要が無いと思います。（現状維持）

質問２
＞プログラムを外部で読み込めるようにしたい

回答２　サンプルコードを下記にお示しします。
　　　　なお、画像や他のスクリプトが無いので、
　　　　document.addEventListener('DOMContentLoaded'、
　　　　に変更してあります。

【サンプルコード】
HTML内の <script> ～</script>は削除して、下記を記述
<script src="./q10134330-sort.js"></script>

［外部ファイル］　ｕｔｆ－８ ファイル名「q10134330-sort.js」
// -------------------------------------------------
// q10134330-sort.js
// -------------------------------------------------
// DOM構築後に処理を開始
document.addEventListener('DOMContentLoaded', 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;
}

});
//------------------------------------------