- 締切済み
セレクトボックスで何度選択しても並び替えが可能に?
自分は、テーブルを用いて、セレクトボックスを押して、並び替えができるようにしましたが、 いかんせん、セレクトボックスを変更すると、 表示内容が変わりますが、1度並び替えたらセレクトボックスの変更ができません。 どうすればいいのでしょうか。 以下は、そのhtml文です。 <select> <option value="select">選択してください</option> <option value="nankai-main">南海本線</option> <option value="semboku">泉北高速鉄道</option> </select> <table id="sort_table"> <thead> <tr> <th>No</th> <th>全角項目</th> <th>数値項目</th> <tbody> <tr id="nankai-main"><td class="nankai-color">1</td><td class="nankai-color">難波駅</td><td class="nankai-color">なんばえき</td></tr> <tr id="nankai-main"><td class="nankai-color">2</td><td class="nankai-color">今宮戎駅</td><td class="nankai-color">いまみやえびすえき</td></tr> <tr id="semboku" style="display:none;"><td class="semboku-color">1</td><td class="semboku-color">中百舌鳥駅</td><td class="semboku-color">なかもずえき</td></tr> <tr id="semboku" style="display:none;"><td class="semboku-color">2</td><td class="semboku-color">深井駅</td><td class="semboku-color">ふかいえき</td></tr> </tbody> <style> #nankai-main { display:none; } #semboku { display:none; } td.nankai-color { background-color:#ccc; border: 1pt solid #f70; } td.semboku-color { background-color:#ccc; border: 1pt solid #00f; } </style> </table> <!--セレクトボックスで表示切替--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script id="rendered-js" > $('select').change(function () { var val = $('select option:selected').val(); if (val == 'select') return; $('tbody tr').fadeOut(); $('tbody tr#' + val).fadeIn(); }); </script> <style> #sort_table { border-collapse:collapse; } #sort_table td { } #sort_table th { cursor:pointer; background-color:lightgray; } </style> <script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script> <!--テーブルのソート機能--> <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>
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7474)
>あなたの質問を通報します。ヽ(`Д´)ノプンプン おいおいおい~(笑) いきなりの喧嘩モードはいかんでしょ。 私、そもそも、何も質問してないですし、 ここ、質問&回答サイトでいろんな意見やヒントをもらう場です。 間違っても解答サイトではないですって~ 「解答」だったら、恐らく有料サイトになっちゃうでしょ~に。 コミュニティーが基本なので、ヒントとして 受け止めてくれたらそれでいいんですってば~ 不特定多数の人が参加するのだから、当然 1発でほしい回答が得られるわけじゃなく、 ヒントの積み重ねが今を育てるというか、説明不要か^^ んま~どっちにしても、わかってて、 冗談で書いたのでしょうから、スルーしておきますが。 当然他の人の投稿も気に入らなければスルーすればいいだけの事 (って、冗談にマジレスしてもしょうがないか^^) ひとまず、今回も回答は変わらず、DOMの 2次構築側のコレクションツリーをJqueryで使うときは、 1次用ではなく、2次用を使うはずなので、 そこの調査でいい結果が出ると思います。 あと、困ったときは、JavaScriptが見ている DOMのメモリダンプを見ると、大抵は解決できるので、 お勧めですよ。 ってことで、特に私の方、気はしてませんが、 雰囲気的に噛みつかれたみたいなので、 この板は自粛しておきますけど。 (どちらも不特定多数の一つの駒にすぎませんもんねっ) ではでは
- AsarKingChang
- ベストアンサー率46% (3467/7474)
面倒なのでちゃんとは見てないけど >1度並び替えたらセレクトボックスの変更ができません。 ここだろうな。 後から書き換えてるならそれはDOM要素で、 そのままのJqueryは起動時に構築されたコレクションツリーを 見てるってのが、原因だとは思う。 .on.~に置き換えると行けるかもしれない (そこが原因という調査はしてないが、前に似たようなことがあって 原因がそれだったので、興味があれば、やってみるともしかしたら いい結果を生むかもしれない)
補足
もう迷宮入りです。具体的なscript文を省略なしに明示しなければ、 あなたの質問を通報します。ヽ(`Д´)ノプンプン