詳しい人求む！

jqueryで、table文で書かれたhtmlをスクロールする方法を知りたい

締切済

質問者：usui-2015
質問日時：2018/08/31 12:02
回答数：3件

jqueryで、table文で書かれたhtmlをスクロールする方法を知りたい。

サンプルを例示願います。
宜しく御願いします。

有難う御座います。

http://www.guriddo.net/demo/bootstrap/functional …
上記のサンプルはそのままでは動きません。

コピーしての複写で実行しましたが、動着ません。

修正箇所を指摘願います。多分、src=の所の指定が可笑しい
と思いますが。

No.3の回答に寄せられた補足コメントです。補足日時：2018/09/01 20:01
通報する

通報する

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

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： fujillin
回答日時：2018/08/31 17:22

No1です。

意味がわかりました。
以前同様の機能を作成したことがありますが、制御する部分を自作しなければならないのでそれなりに面倒です。
tbodyに対して「overflow:scroll;」とかが効いてくれれば、スクリプトも必要ないですし、簡単に住むんですけれどね。

手っ取り早く実現なさりたければ、表形式のデータを扱うライブラリが数多く作成されていますので、それらをご利用なさるのが簡単ではないかと思います。
（多くのものが、ご質問のようなスクロール機能を実装しています。余分な機能も付いてきちゃいますけれど…）

検索すればいろいろ見つかると思いますが、例えばの一例。
https://qiita.com/mogetarou/items/8f11927130c2cf …
http://www.designwalker.com/2009/09/jquery-table …

上記にもありますが、雰囲気のご参考までにそのなかのjqGridのデモページを。
http://www.guriddo.net/demo/bootstrap/functional …

それぞれのライブラリには、大抵デモページが存在すると思いますので、直接、触ってみて、良さそうなものをご利用になるのが宜しいかと思います。
もちろん、ご自身で作成するという道もありますが、その際にも先人の作ったものが参考にはなることと思います。

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

初心者にはとっつきにくい。
簡単なサンプルの例示と言う訳には行かないでしょうか。

通報する

お礼日時：2018/09/01 12:21

No.2

回答者： yambejp
回答日時：2018/08/31 16:55

＞数万件と有ります。

当然、画面のサイズには入りません

数万件のデータを１ページにおいちゃだめですね
ページングで切り替えてつかえてください

なおテーブルのヘッダ固定は
divでやりますが、列幅を調整する必要があるので
ちょっと面倒です

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

列幅の固定でも、面倒でも何でも
良いので、出来る方法をお教え
願います。

通報する

お礼日時：2018/08/31 16:58

参考程度に

No.1

回答者： fujillin
回答日時：2018/08/31 12:33

こんにちは

＞htmlをスクロールする方法を知りたい。
HTML（＝文書または文書断断片）のスクロールなら.scrollTop()や.scrollLeft()で制御できるはずですが、そういう意味ではないようにも思えますね。
http://api.jquery.com/scrollTop/
アニメーションでスクロールしたいのなら、animateと組み合わせれば可能です。
https://qiita.com/yamaguchi_takashi/items/edce73 …

具体的にどのようなHTMLで、何をどうなさりたいのでしょうか？

- 0
- 件

通報する

この回答へのお礼

有難う御座います。

実データは例示出来ないので仮として示します。
<html>
<head><title>sample</title></head>
<body>
<table border=1>
<tr>
<th>番号</th>
<th>国語</th>
<th>数学</th>
</tr>
<tr>
<td>1</td>
<td>65</td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>32</td>
<td>95</td>
</tr>
<tr>
<td>3</td>
<td>65</td>
<td>55</td>
</tr>
<tr>
<td>4</td>
<td>36</td>
<td>62</td>
</tr>
</table>
</body>
</html>

上記では、4件しか記載をしていませんが。実際は、数万件と有りま
す。当然、画面のサイズには入りませんので。下の方に移動させると項
目見出しが、スクロールされて見えなくなります。

これを、項目見出しをその位置に表示をさせて移動しない様にして、
データのみをスクロールさせたいと言う事です。

質問が舌足らずで済みません。宜しく御願いします。