質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2820閲覧

固定したテーブルをソートしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/03/23 13:14

編集2018/03/23 17:25

テーブルをソートをしたいのですが、固定した列がソートされず困っています。

しかしスクロールテーブルなので、固定ははずせません。

かなり難易度高めだと思いますが、、どなたか解決していただけませんでしょうか?

▼実際の動作はこちらです。
https://jsfiddle.net/9cvueqkd/6/

▼上の動作は下記コードとライブラリ「tablesorter」によるものです。

html

1<div id="x_data_area"> 2 3 <table class="csTbl"><!-- 固定ヘッダ --> 4 <tbody> 5 <tr><th>番号</th></tr> 6 </tbody> 7 </table> 8 9 <div id="header_h"><!-- 水平ヘッダ --> 10 <table id="h_fix_tbl1" class="csTbl"> 11 <tbody> 12 <tr> 13 <th>名前</th> 14 <th>性別</th> 15 <th>年齢</th> 16 </tr> 17 </tbody> 18 </table> 19 </div> 20 21 <div id="header_v"><!-- 垂直ヘッダ --> 22 <table class="csTbl" id="v_fix_tbl"> 23 <tbody> 24 <tr><th>1</th></tr> 25 <tr><th>2</th></tr> 26 <tr><th>3</th></tr> 27 <tr><th>4</th></tr> 28 <tr><th>5</th></tr> 29 <tr><th>6</th></tr> 30 <tr><th>7</th></tr> 31 </tbody> 32 </table> 33 </div> 34 35 <div id="data"><!-- スクロールデータ --> 36 <table id="h_fix_tbl2" class="csTbl tablesorter"> 37 <thead> 38 <tr> 39 <th class="header headerSortUp">名前</th> 40 <th class="header headerSortUp">性別</th> 41 <th class="header headerSortUp">年齢</th> 42 </tr> 43 </thead> 44 <tbody> 45 <tr><td>太郎</td><td></td><td>18</td></tr> 46 <tr><td>花子</td><td></td><td>13</td></tr> 47 <tr><td>敏郎</td><td></td><td>80</td></tr> 48 <tr><td>俊一</td><td></td><td>75</td></tr> 49 <tr><td>真美</td><td></td><td>10</td></tr> 50 <tr><td>大地</td><td></td><td>35</td></tr> 51 <tr><td>綾香</td><td></td><td>25</td></tr> 52 </tbody> 53 </table> 54 </div> 55</div> 56 57<script> 58//スクロール連動機能 59function $E(id){ return document.getElementById(id); } 60 61function scroll(){ 62 $E("header_h").scrollLeft= $E("data").scrollLeft; 63 $E("header_v").scrollTop = $E("data").scrollTop; 64} 65 66 $E("data").onscroll=scroll; 67 68//ソート機能(下記とライブラリ「tablesorter」) 69$(function(){ 70 $("#h_fix_tbl2").tablesorter(); 71 $("#h_fix_tbl1 th").click(function(){ 72 var n = $("#h_fix_tbl1 th").index(this); 73 $("#h_fix_tbl2 th").eq(n).click(); 74 }); 75}); 76</script> 77

css

1 2/* 外枠 */ 3#x_data_area { 4 position: relative; 5 width: 386px; 6 height: 167px; 7} 8#x_data_area > table { 9 position:absolute; 10 left:0px; 11 top:0px; 12 width:90px; 13} 14 15/* 基本のテーブル定義 */ 16table.csTbl { 17 table-layout:fixed; 18 border-collapse:collapse; 19 font-size:16px; 20 border:1px solid #000000; 21} 22table.csTbl td{ 23 border:1px solid #000000; 24 height:16px; 25} 26table.csTbl th { 27 border: 1px solid #000000; 28} 29table.csTbl tr:nth-child(odd) td{ 30 color:#000000; 31} 32table.csTbl tr:nth-child(even) td{ 33 color:#000000; 34} 35#h_fix_tbl1, 36#h_fix_tbl2 { 37 width:360px; 38} 39#h_fix_tbl1 th, #h_fix_tbl1 td, 40#h_fix_tbl2 th, #h_fix_tbl2 td { 41} 42#h_fix_tbl1 th, 43#h_fix_tbl2 th { 44 width:60px; 45} 46#v_fix_tbl th{ 47 width:90px; 48} 49#header_h { 50 position: absolute; 51 left:90px; 52 top:0px; 53 width:280px; 54 overflow-x:hidden; 55 overflow-y:hidden; 56} 57#header_v { 58 position: absolute; 59 left:0px; 60 top:27px;/* top調整 */ 61 width:90px; 62 height:130px; 63 overflow-x:hidden; 64 overflow-y:hidden; 65} 66#data { 67 position: absolute; 68 left:90px; 69 top:22px; 70 overflow:scroll; 71 width:296px; 72 height:145px; 73} 74#v_fix_tbl { 75 background: #FF6565; 76} 77#h_fix_tbl2 { 78 position:absolute; 79 top:-22px; 80} 81#h_fix_tbl1 th:hover{ 82 color: red; 83 cursor: pointer; 84} 85

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

解決してくれませんかというのは tablesorter を作り直せということでしょうか?
それなら作者に要望を出してしばらくお待ちください。

それとも自分の好みに合うライブラリを代わりに検索してくれということでしょうか?
それなら人力検索でお聞きください。

もし自分でカスタマイズする気があるなら実際にやってみて具体的に質問してください。
何をどうしていいやらまったくわからないならそれはもうプログラミングの質問ではありません。まずプログラミングの勉強から始めてください。

投稿2018/03/24 00:38

Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/25 16:36 編集

xxx
Zuishin

2018/03/24 02:13

当たり前のことを書いただけなのに喧嘩を売られたように感じたのですかね。 不十分なのでカルシウムをとってやり直してください。
退会済みユーザー

退会済みユーザー

2018/03/25 16:36 編集

xxx
Zuishin

2018/03/24 03:09

本当に勉強になったなら結構なことです。 次からは低評価が 5 も入ることはないでしょうし複数の人から不十分という指摘も受けなくて済むでしょう。
退会済みユーザー

退会済みユーザー

2018/03/25 16:36 編集

xxx
Zuishin

2018/03/24 03:34

先に質問履歴を見ておくべきでした。 常習犯ですね。 訂正します。勉強も成長もしてないので低評価は減らないでしょう。
退会済みユーザー

退会済みユーザー

2018/03/25 16:36 編集

xxx
Zuishin

2018/03/24 03:50

ペースの問題でも意地悪でもないので勝手な色眼鏡で見ずにみなさんに言われたことを真摯に受け止めるのがいいと思います。
退会済みユーザー

退会済みユーザー

2018/03/25 16:36 編集

xxx
退会済みユーザー

退会済みユーザー

2018/03/25 16:36 編集

xxx
Zuishin

2018/03/25 11:10

まあ好きなだけ回り道をしてください。
退会済みユーザー

退会済みユーザー

2018/03/25 16:37 編集

xxx
Zuishin

2018/03/25 11:19

いつまでか知りませんがよい休日を。 カルシウムをとって今夜は早く寝てください。
Zuishin

2018/03/25 11:38

編集して猫をかぶったわけですか。 コメントを編集したら編集マークがつくので。
退会済みユーザー

退会済みユーザー

2018/03/25 16:37 編集

xxx
退会済みユーザー

退会済みユーザー

2018/03/25 16:37 編集

xxx
Zuishin

2018/03/25 12:06

イヤミしか言っていないように見えるのはあなたのメガネがくもっているだけなのでカルシウムを補給して落ち着いてください。 親切で現実的で適切な回答です。
退会済みユーザー

退会済みユーザー

2018/03/25 16:37 編集

xxx
退会済みユーザー

退会済みユーザー

2018/03/25 16:37 編集

xxx
Zuishin

2018/03/25 12:14

失礼とは思いません。 あなたが自分を過大評価しているだけです。 いくら低評価をもらっても反省できない人の反省のきっかけになれば幸いです。
退会済みユーザー

退会済みユーザー

2018/03/25 16:37 編集

xxx
Zuishin

2018/03/25 12:22

低評価を良いことと感じているとは。 外国の方ですか? 一度辞書を引いてみたらいいと思いますが、「あなどられている」「さげすまれている」ということです。 これは質問自体への評価というよりはあなたへの(私個人ではなく)一般ユーザーの評価です。
退会済みユーザー

退会済みユーザー

2018/03/25 16:37 編集

xxx
Zuishin

2018/03/25 12:58

先の私のコメントは質問者が低評価を誇りに思っていることを表明したことに対するコメントです。 編集マークのついているものは編集されています。
退会済みユーザー

退会済みユーザー

2018/03/25 16:38 編集

すいませんでした。編集しました。全面的に悪かったので、勘弁してください。
guest

0

ベストアンサー

投稿2018/03/24 02:11

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/24 02:32 編集

ありがとうございます。そのようなサンプルシリーズがあったのですね。参考にさせて頂きます。
退会済みユーザー

退会済みユーザー

2018/03/24 04:11

まったく同じテーブルを作ろうとして、開発ツールですべてのコードをコピーしてみました。が、動きません。そのようなときは何が悪いか、お心当たりはございませんでしょうか?
Lhankor_Mhy

2018/03/24 04:31

「開発ツールですべてのコードをコピー」であれば、パスなどが違うのではないでしょうか。
Lhankor_Mhy

2018/03/24 05:27

説明が足りなかったかもしれないので補足をしますと、 https://mottie.github.io/tablesorter/docs/example-widget-scroller.html#fixed-demo のソースコードにはこのような一行があります。 <script src="js/jquery-latest.min.js"></script> これは、このhtmlファイルと同じ階層にjsフォルダがあり、その中にjquery-latest.min.jsというファイルがなければ、読み込まれません。 なので、そのままコピペしても、偶然にサンプルページと同じ構成になっていない限り動作しない、ということになります。
退会済みユーザー

退会済みユーザー

2018/03/24 08:47

へぇー!なるほど!まさに、jsは別ディレクトリに入れておりました。色々なヒントを誠にありがとうございます。もう一度コピペ試してみます。 あ、コピーするにあたって教えてください(>_<) 下記のようにjsを全てコピーしているのでけれど、「明らかにこれは不要だろう」というファイルにお心当たりはありますか? https://www.fastpic.jp/images.php?file=9618068786.jpg とても長いjsなので、少しくらい選ばないとと思いまして。
Lhankor_Mhy

2018/03/24 08:58

ぱっと見、全部必要なんじゃないでしょうか。
退会済みユーザー

退会済みユーザー

2018/03/24 09:09

またあれをコピーするのかぁ…笑 こうなったらひとまずディレクトリ階層も含めて丸ごとやってみます。
Lhankor_Mhy

2018/03/24 09:14

「名前をつけてページを保存」すればいいのでは?
退会済みユーザー

退会済みユーザー

2018/03/25 11:02 編集

やーーっと終わったところで、ご報告に戻ってみら、そんな…笑 これからは覚えておきます。いろいろありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問