BLOG

sortHTMLTable

こんにちは。

英会話も筋トレだなと継続の力を少しずつ感じてきておりますどうもハヤトワンです。

徐々に自己紹介になれてきた。

今日からここでのブログには日課のコーディングとプラスアルファで朝学んだ英語も備忘録として書き綴っておこうということにしました。

そのほうが今までと比べても力になってくれるでしょう!

ということで、まずはコーディングから。

ボックスのカテゴリーを押すとソートされるボックスを作成。

https://github.com/HayatoMoromasa/sample/tree/main/sortHTMLTable

    <script type="text/javascript">

        th = document.getElementsByTagName('th');
        for (let c=0; c < th.length; c++) {
            th[c].addEventListener('click',item(c))
        }

        function item(c) {
            return function() {
                sortTable(c)
            }
        }

        function sortTable(c) {
            let table, rows, switching, i, x, y, shouldSwitch;
            table = document.getElementById("myTable");
            switching = true;

            while (switching) {
                switching = false;
                rows = table.rows;

                for (i = 1; i < (rows.length - 1); i++) {
                    shouldSwitch = false;

                    x = rows[i].getElementsByTagName("TD")[c];
                    y = rows[i + 1].getElementsByTagName("TD")[c];

                    if(x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
                        shouldSwitch = true;
                        break;
                    }
                }
                if (shouldSwitch) {
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                }
            }
        }
    </script>

カテゴリー枠をクリックイベントでitem()という関数が発動するようにして、そのitem()のなかではsortTable()関数を呼ぶ。

sortTable()関数にて列がソートされるように指定。

                    if(x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()){
                        shouldSwitch = true;
                        break;
                    }

ここで昇順を指定。

                if (shouldSwitch) {
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                }

ここでDOMを作成しております。

次に今日の英語の復習

シンプルに知らなかった単語やら表現やらのメモです。


affected:影響を受ける

It is not affected:影響を受けない

state of emergency:非常事態

curfew time:門限

salary:給料

prize money:賞金

hired:雇われた

polite:丁寧

I just now took a shower.:私はたった今シャワーを浴びてきました。

I am going to take a shower:私はシャワーを浴びてきました


前半とかなんの会話してたかスケスケな気がします笑

ということで、こんな感じでやっていきます。

この習慣になれたら次はデザインの勉強も少しずつやって行こうと思う。

では良い一日を!