DOBON.NETプログラミング道掲示板

HOME HELP 新規作成 新着記事 ツリー表示 スレッド表示 トピック表示 発言ランク ファイル一覧 検索 過去ログ

■35411 / 親記事) 　テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
  ▼■
□投稿者/ えっぴ〜 一般人(3回)-(2023/05/10(Wed) 18:37:42)
  • アイコン環境/言語:[javascript]　
    分類:[その他]　

    テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
    //本文
    <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の部分のみご記述ください。
マルチポストを報告
違反を報告
引用返信 削除キー/
■35412 / ResNo.1) 　Re[1]: テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
□投稿者/ 魔界の仮面弁士 大御所(1543回)-(2023/05/10(Wed) 20:51:16)
  • アイコン
    ■No35411に返信(えっぴ〜さんの記事)
    > テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
    質問の意図を理解しきれていないのですが、処理を外部から呼びたいなら、
    その処理を Global スコープの function として用意すれば良いのでは?
    https://developer.mozilla.org/ja/docs/Glossary/Global_object

    現行の実装のままソートを呼び出したいということなら
    document.getElementById('sort_table').tBodies[0].rows[0].cells[3].click();
    などを呼び出すという手があります。

    変数 column_no や column_no_prev の値を読み取りたいという話なら
    それらの変数をイベントリスナーの外側で宣言するなどすればよいわけで。


    > </style>
    > //javascript
    > <script>

    <!-- javascript -->
    にしなくて良いのですか?


    > //文字列ソート（昇順）
    > function compareString(a, b) {
    > //文字列ソート（降順）
    > function compareStringDesc(a, b) {
    このいずれも、実装が明らかにおかしいような…。
    このケースだと、return 0 には絶対に到達しませんよね?
    +1 , 0 , -1 の三値を返したいなら、else if を使うべきかと。

違反を報告
引用返信 削除キー/
■35413 / ResNo.2) 　Re[2]: テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
□投稿者/ 書き換えようにも構文が複雑すぎて。 一般人(1回)-(2023/05/11(Thu) 07:20:13)
  • アイコンその処理を Global スコープの function として用意すれば良いのでは?→
    今のjavascriptの関数だと、書き換えようにも構文が複雑すぎて、
    https://developer.mozilla.org/ja/docs/Glossary/Global_object
    のページでは、全然理解ができません。
    後、書き換えた内容をここにご記入いただければ幸いです。
違反を報告
引用返信 削除キー/
■35414 / ResNo.3) 　Re[3]: テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
□投稿者/ 書き換えようにも構文が複雑すぎて。 一般人(2回)-(2023/05/11(Thu) 08:05:27)
  • アイコンその処理を Global スコープの function として用意すれば良いのでは?→
    今のjavascriptの関数だと、書き換えようにも構文が複雑すぎて、
    https://developer.mozilla.org/ja/docs/Glossary/Global_object
    のページでは、全然理解ができません。
    後、書き換えた内容をここにご記入いただければ幸いです。
    もし、cssだけで実装可能な場合は、その旨をご教授の上、
    cssの記述全文をお書きください。
違反を報告
引用返信 削除キー/
■35415 / ResNo.4) 　Re[4]: テーブルを順番通りに直すプログラムを外部で読み込めるようにしたいです。
□投稿者/ 無理ゲーなのがわかりました。 一般人(1回)-(2023/05/11(Thu) 12:50:51)
  • アイコン無理ゲーなのがわかりました。
解決済み!
違反を報告
引用返信 削除キー/


スレッド内ページ移動 / << 0 >>

このスレッドに書きこむ
Mode/　 Pass/

HOME HELP 新規作成 新着記事 ツリー表示 スレッド表示 トピック表示 発言ランク ファイル一覧 検索 過去ログ

- Child Tree -