LoginSignup
sembokulove
@sembokulove (Missing place)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

以下は、jqueryを用いてのプルダウンでテーブルの表示切替、並び替えですが、 表示切替が並び替えをした後、1度しか動作しません。

Q&A

Closed

HTML5jQueryJavaScript初心者

以下は、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

2Answer

PECMM
@PECMM

すごくざっくり言うと、tbody が空になるからですね。

thead の行をクリックしてテーブルの行ソートした際に
tbody ではなく thead に tr を追加しています。
(let tbody という名前の変数だが、実態は thead)

console.log でも開発者ツールのDOM表示でもいいですが
とにかく動かしながら怪しいデータの中身を確認することをお勧めします。

0Like

Comments

  1. This comment has been deleted for violation of our Terms of Service.

  2. @culage

    let tbody = this.parentNode.parentNode;をlet tbody = $("#sort_table tbody")[0];に変えればいいですよ。

    授人以魚不如授人以漁。

  3. @sembokulove

    Questioner

    ありがとうございます。
    並び替えた後何度も切り替えが可能となりました。
    以上で質問を締め切らせていただきます。:relaxed:

HalHarada
@HalHarada

机上ですみません。

F12キーを押して、１回目の実行時にエラーが発生してないか？確認して下さい。

window.addEventListener('load', function () {
	let column_no = 0; //今回クリックされた列番号
	let column_no_prev = 0; //前回クリックされた列番号
	document.querySelectorAll('#sort_table th').forEach(elm => {
		elm.onclick = function () {
　　　　　　　alert(this.cellIndex);

alertを入れて、２回目のonclickが生きているか確認してください。(１回目が正常終了していること)

1度しか動作しません。断言している以上、私もこれ以上よくわからないです。

0Like

Comments

  1. @sembokulove

    Questioner

    エラーになりました。
    どうしましょう。

  2. @HalHarada

    １回目のエラーが２回目のクリックを妨げた。よって

    そのエラーを解消すれば、２回目のクリックができるのでは？調査の熱意とログ情報が不足していると見受けられますが。

  3. @sembokulove

    Questioner

    違うんです。それ以前にコードエラーが出るんですs。
    後誠に勝手ながら、僕は夜遅くはご返答が出来かねます。
    朝6時～夜9時までのご返信しか致しかねます。

Your answer might help someone💌

LoginSign Up