以下は、jqueryを用いてのプルダウンでテーブルの表示切替、並び替えですが、 表示切替が並び替えをした後、1度しか動作しません。
Q&A
Closed
以下は、jqueryを用いてのプルダウンでテーブルの表示切替、並び替えですが、
表示切替が並び替えをした後、1度しか動作しません。どうしたらいいですか。
↓でセレクトボックスの表示を切り替えているのですが、うまく動かないのです。
もう迷宮入りでしょうか。
<!--セレクトボックスで表示切替-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
$(document).on('click', 'select', function(){
var val = $('select option:selected').val();
if (val == 'select') return;
$('tbody tr').fadeOut();
$('tbody tr#' + val).fadeIn();
});
</script>
<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>
</table>
<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" >
$(document).on('click', 'select', 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>
0
