テーブルをソートをしたいのですが、固定した列がソートされず困っています。
しかしスクロールテーブルなので、固定ははずせません。
かなり難易度高めだと思いますが、、どなたか解決していただけませんでしょうか?
▼実際の動作はこちらです。
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
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/25 16:36 編集
2018/03/24 02:13
退会済みユーザー
2018/03/25 16:36 編集
2018/03/24 03:09
退会済みユーザー
2018/03/25 16:36 編集
2018/03/24 03:34
退会済みユーザー
2018/03/25 16:36 編集
2018/03/24 03:50
退会済みユーザー
2018/03/25 16:36 編集
退会済みユーザー
2018/03/25 16:36 編集
2018/03/25 11:10
退会済みユーザー
2018/03/25 16:37 編集
2018/03/25 11:19
2018/03/25 11:38
退会済みユーザー
2018/03/25 16:37 編集
退会済みユーザー
2018/03/25 16:37 編集
2018/03/25 12:06
退会済みユーザー
2018/03/25 16:37 編集
退会済みユーザー
2018/03/25 16:37 編集
2018/03/25 12:14
退会済みユーザー
2018/03/25 16:37 編集
2018/03/25 12:22
退会済みユーザー
2018/03/25 16:37 編集
2018/03/25 12:58
退会済みユーザー
2018/03/25 16:38 編集