テーブルをプルダウンに合わせて表示切替し、尚且つ、表示されたテーブルを並び替えたいです。

Comments

1. 

   @sembokulove

   Questioner

   more_horiz

   ありがとうございます。
   で、それを応用して作ったのがこれですが、
   セレクトボックスでテーブルを切り替えられますが、
   いかんせん、1度切り替えて、並び替えをすると、
   2度目以降のテーブルの切り替えができません。
   どうやったら解決しますか。
   これ答えてください。
   答える人がいない場合、強制終了して、
   もう一度、出し直します。ヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ
   1個目

   <!--セレクトボックスで表示切替-->
     <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>
   

   2個目
   <!--テーブルのソート機能-->
   <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>
   

   html本文

   <select>
     <option value="select">選択してください</option>
     <option value="nankai-main">南海本線</option>
     <option value="semboku">泉北高速鉄道</option>
     <option value="a011">要素1</option>
     <option value="a012">要素2</option>
     <option value="a013">要素3</option>
   </select>
   <table id="sort_table">
   <thead>
   	<tr>
   		<th>No</th>
   		<th>全角項目</th>
   		<th>数値項目</th>
   		<th>カンマ</th>
   		<th>全角項目</th>
   		<th>数値項目</th>
   		<th>カンマ</th>
   	</tr>
   </thead>
   <tbody>
       <tr id="nankai-main"><td class="nankai-color">1</td><td class="nankai-color">南海電気鉄道</td><td class="nankai-color">南海本線</td><td class="nankai-color">難波駅</td><td class="nankai-color">なんばえき</td><td class="nankai-color">NANBA</td><td class="nankai-color">ナン</td></tr>
       <tr id="nankai-main"><td class="nankai-color">1</td><td class="nankai-color">南海電気鉄道</td><td class="nankai-color">南海本線</td><td class="nankai-color">今宮戎駅</td><td class="nankai-color">いまみやえびすえき</td><td class="nankai-color">IMAMIYAEBISU</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><td class="semboku-color">中百舌鳥駅</td><td class="semboku-color">なかもずえき</td><td class="semboku-color">NAKAMOZU</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><td class="semboku-color">深井駅</td><td class="semboku-color">ふかいえき</td><td class="semboku-color">FUKAI</td><td class="semboku-color">フカ</td></tr>
       <tr id="semboku" style="display:none;"><td class="semboku-color">3</td><td class="semboku-color">泉北高速鉄道</td><td class="semboku-color">泉北高速鉄道線</td><td class="semboku-color">泉ケ丘駅</td><td class="semboku-color">いずみがおかえき</td><td class="semboku-color">IZUMIGAOKA</td><td class="semboku-color">イズミ</td></tr>
       <tr id="semboku" style="display:none;"><td class="semboku-color">4</td><td class="semboku-color">泉北高速鉄道</td><td class="semboku-color">泉北高速鉄道線</td><td class="semboku-color">栂・美木多駅</td><td class="semboku-color">とが・みきたえき</td><td class="semboku-color">TOGA-MIKITA</td><td class="semboku-color">トガ</td></tr>
       <tr id="semboku" style="display:none;"><td class="semboku-color">5</td><td class="semboku-color">泉北高速鉄道</td><td class="semboku-color">泉北高速鉄道線</td><td class="semboku-color">光明池駅</td><td class="semboku-color">こうみょういけえき</td><td class="semboku-color">KOMYOIKE</td><td class="semboku-color">コミヨ</td></tr>
       <tr id="semboku" style="display:none;"><td class="semboku-color">6</td><td class="semboku-color">泉北高速鉄道</td><td class="semboku-color">泉北高速鉄道線</td><td class="semboku-color">和泉中央駅</td><td class="semboku-color">いずみちゅうおうえき</td><td class="semboku-color">IZUMICHUO</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>