アプリ版：「スタンプのみでお礼する」機能のリリースについて

詳しい人求む！

列のどこをクリックしてもソートできるようにするには

解決済

  • 質問者：zyousuke
  • 質問日時：
  • 回答数：7件

いつもお世話になっています。
テーブルの先頭行(タイトル行)をクリックしたときにソートできるようにしていたのですが、行数が増えてきて先頭行をクリックするのがしんどくなってきたので、列中のどこをクリックしてもソートするサンプルコードをご教示ください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

参考程度に

No.6ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんばんは



HTML・CSSのカテですけれど、HTMLということで良いのでしょうか？

＞行数が増えてきて先頭行をクリックするのがしんどくなってきたので、
普通は、タイトル行を固定するような方法を取ると思いますけれど・・
（タイトルのthを position: sticky; で常時表示しておくなど）


どうしてもご質問のようになさりたければ・・
＞先頭行(タイトル行)をクリックしたときにソートできるようにしていたのですが～
現状の実装方法が不明ですけれど、想像するところスクリプトで実装しているものと推測します。
多分クリックイベントを拾っているのでしょうから、それをテーブル全体に広げれば済む話と思います。

例えば、
　Table要素.addEventListener('click', e => {
　　const c = e.target, n = c.nodeName;
　　if(n != 'TD' && n != 'TH') return;
　　const m = c.cellIndex;
　　　　・・・・・
などとすれば、変数 ｍ にクリックした列番号（＝0始まり）を得られますので、後の処理は現状の処理と同様に行えば良いでしょう。


※ 意味を取り違えていましたら失礼。スルーしてください。
    • good
    • 1
    • 件
通報する
この回答へのお礼

カテは迷いつつも、やはりここが最適と判断しました。

position: stickyすばらしい！
この1文で求めていた事以上の効果を得ました。
つまり、いつでもタイトル行が目に入るオマケを得ました。

ご教示いただいたクリックイベントのコードは、まさに私が当初求めていたコードですが、position: stickyの方が単純明快で、しかもオマケ付きなので、こちらを採用させていただきました。

通報する
お礼日時：2024/01/27 20:51

参考程度に

No.7

  • 回答者： gura_
  • 回答日時：

zyousuke さん


････列中のどこをクリックしてもソートするサンプルコード･････････

先頭行以外をクリックしたときに列をソートするサンプル。↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
#sort_table {
border-collapse:collapse;
}
#sort_table td {
border:1px solid lightgray;
}
#sort_table th {
cursor:pointer;
background-color:lightgray;
}
</style>
</head>
<body>
<table id="sort_table">
<tr>
<th>No</th>
<th>全角項目</th>
<th>数値項目</th>
<th>カンマ</th>
</tr>
<tr><td>1</td><td>かきくけこ</td><td>1</td><td>1,000</td></tr>
<tr><td>2</td><td>さしすせそ</td><td>10</td><td>10,000</td></tr>
<tr><td>3</td><td>あいうえお</td><td>100</td><td>2,000</td></tr>
<tr><td>4</td><td>カキクケコ</td><td>2001</td><td>3,000</td></tr>
<tr><td>5</td><td>アイウエオ</td><td>2002</td><td>20,000</td></tr>
<tr><td>6</td><td>サシスセソ</td><td>2003</td><td>11,000</td></tr>
<tr><td>7</td><td>一丁目</td><td>1.234</td><td>12,000</td></tr>
<tr><td>8</td><td>二丁目</td><td>12.34</td><td>30,000</td></tr>
<tr><td>9</td><td>三丁目</td><td>123.4</td><td>31,000</td></tr>
<tr><td>10</td><td>１丁目</td><td>0.001</td><td>32,000</td></tr>
<tr><td>11</td><td>２丁目</td><td>0.002</td><td>400,000</td></tr>
<tr><td>12</td><td>３丁目</td><td>0.003</td><td>50</td></tr>
</table>

<script>
let column_no = 0; //今回クリックされた列番号
let column_no_prev = 0; //前回クリックされた列番号
window.addEventListener('load', function () {
document.querySelectorAll('#sort_table td').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>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

querySelectorAll()で全ての要素を取ってこれるのですね。

しかし、fujillinさんのTable自体にイベントリスナーを追加する書き方の方が、ループが不要なので、そちらに軍配か。

コンマ区切りの書式を数と見なすには、もうひと手間必要そうです(環境によるか?)。

通報する
お礼日時：2024/01/28 21:13

No.5

  • 回答者： lv4u
  • 回答日時：

>>しかし、あえてこの難題に挑戦するとしたら、どのようなコードを書きますか。



エクセルでは、ヘッダー部を固定して明細部のみをスクロールできたと思います。なので、同じような仕様として、テーブルの先頭行（タイトル行）を表示させ続ける仕様にすればいいのではないでしょうか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

目指すべき方向性が見えて参りました。

引き続き先生方の助言をお待ちしています。

ところで、ページ中にテーブルが3個あり、今回はテーブル2を操作しようとしています。
ーーーーーーーーー
テーブル1
あいうえお
テーブル2
かきくけこ
テーブル3
ーーーーーーーーー

なんだか難そうです・・・

通報する
お礼日時：2024/01/27 18:00

No.4

  • 回答者： tefu_tefuu
  • 回答日時：

エクセルでは、行を選択してから非表示ではなくて、グループ化した方が、後で左側に表示される拡大縮小でできたと思います。


ただ、先頭行にソートの機能が残っているかどうかは、してみないと判断できません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

私のエクセルは古すぎて、行のグループ化の手順が良く分かりませんでした。

しかし今回はウェブのテーブルを操作する方法を聞きに参りました。

その件についてご存知でしたら、ご教示ください
m(__)m

通報する
お礼日時：2024/01/27 17:48

No.3

  • 回答者： lv4u
  • 回答日時：

＞＞つまり、このような仕様は一般的でなく、簡単に実現できるコードは用意されていないという事でしょうか。



そういうことでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

承知しました。
簡単には実現できない事が分かり、ひとまず満足です。

しかし、あえてこの難題に挑戦するとしたら、どのようなコードを書きますか。

気が向いたらで構いません^^;

通報する
お礼日時：2024/01/27 17:33

No.2

  • 回答者： tefu_tefuu
  • 回答日時：

先頭行の下からソートをしたい箇所の手前まで、行をグループ化して、縮めて見えなくすることはできないのですか？

    • good
    • 0
    • 件
通報する
この回答へのお礼

何行目を見ていようと、先頭行だけは常に表示されるようにするという事でしょうか。
これが実現できれば、項目名の確認も一瞬でできるので理想的です。
よろしければ簡単な見本をご教示ください。

通報する
お礼日時：2024/01/27 17:28

No.1

  • 回答者： lv4u
  • 回答日時：

＞＞列中のどこをクリックしてもソートする



そういう仕様って、使いにくくなると思いませんか？
    • good
    • 0
    • 件
通報する
この回答へのお礼

意図せずソートが実行されてしまう事が想定されます。
だから探してもなかなか見つからなかったのでしょうか。

つまり、このような仕様は一般的でなく、簡単に実現できるコードは用意されていないという事でしょうか。

通報する
お礼日時：2024/01/27 17:18

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報