HTMLおよびJavaScriptに関して教えてください。
現在HTMLにテーブルタグを使用して、5か月分の日割りの表を作成しています。横に日付を設定する必要性から、テーブルの横スクロールを出して1画面で見せています。(かなり長い横スクロールのテーブルです)
このとき、前月、今月、次月、次々月、次々次月と表示することとなり、表の始まりが前月となっています。
要望としては、画面を開いたときに、今月の位置で横スクロールされた状態になっていて欲しいのです。
縦の位置であれば、アンカーを使えば良さそうですが、テーブル内の横スクロールの制御は出来なそうで、、、
以上、よろしくお願いします。
No.1
- 回答日時:
onloadで、テーブルの2番目のセルに合わせてスクロールさせる
サンプルです。
(大きなテーブルに各月のテーブルが入れ子で配置されているという前提)
<html>
<head>
<title></title>
<script type="text/javascript">
function table_scroll() {
var T = document.getElementById('TBL');
document.body.scrollLeft =
T.offsetLeft + T.rows[0].cells[1].offsetLeft;
}
</script>
</head>
<style type="text/css">
table{border:solid thin #ccc}
</style>
<body onload="table_scroll()">
<table id="TBL"><tr>
<td><table width="600"><tr><th>先月</th></tr></table></td>
<td><table width="600"><tr><th>今月</th></tr></table></td>
<td><table width="600"><tr><th>来月</th></tr></table></td>
</tr></table>
</body>
</html>
steel_grayさん
ご回答ありがとうございました。
イメージはサンプルの通りなのですが、
これにスクロールバーを追加すると、
うまく動作しないようです。
以下のように<div>を入れるとダメなのでしょうか?
申し訳ありませんが、アドバイスがあればお願いします。
<div style="overflow:scroll;width:500px;">
<table id="TBL"><tr>
<td><table width="500"><tr><th>先月</th></tr></table></td>
<td><table width="500"><tr><th>今月</th></tr></table></td>
<td><table width="500"><tr><th>来月</th></tr></table></td>
</tr></table>
</div>
No.2
- 回答日時:
古文書を絶対値で指定座標へ移動させています
毎月の大きさが同一でしたら変更不要ですが。異なる場合毎月変更が必要ですが
IE5.5以降しか対応していませんが、縦書きで作成した場合は、アンカーは使えますが
参考URL:http://www.htmq.com/js/window_scrollby.shtml
ご回答ありがとうございます。
スクロールの座標指定を行えば、確実に移動可能ですね。
参考にさせていただきます。
ありがとうございました。
No.3ベストアンサー
- 回答日時:
#1です。
こんな感じでしょうか?
<html>
<head>
<title></title>
<script type="text/javascript">
function table_scroll() {
var L = document.getElementById('LAYER');
var T = L.getElementsByTagName('table')[0];
L.scrollLeft =
T.offsetLeft + T.rows[0].cells[1].offsetLeft;
}
</script>
</head>
<style type="text/css">
table{border:solid thin #ccc}
</style>
<body onload="table_scroll()">
<div style="overflow:scroll;width:500px;position:relative;" id="LAYER">
<table><tr>
<td><table width="600"><tr><th>先月</th></tr></table></td>
<td><table width="600"><tr><th>今月</th></tr></table></td>
<td><table width="600"><tr><th>来月</th></tr></table></td>
</tr></table>
</div>
</body>
</html>
steel_grayさん
ありがとうございます。
まさに望んでいたカタチです。
画面はASPで動的に作成しているので、
この方法なら違和感なく追加できます。
お見事です。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(プログラミング・Web制作) webデザインです。 プログラミンでの質問なのですが 手動でpc画面を下にスクロールするとスクロール 1 2022/10/10 22:01
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- Excel(エクセル) CSVファイルがカンマ区切りにならない。対処法を教えていただきたいです。 仕事でSMS一斉送信ができ 2 2022/07/01 21:24
- Access(アクセス) Accessテーブルの結合で別々のテーブルのフィールドを組み合わせて値を出す方法について 2 2022/07/20 19:43
- Visual Basic(VBA) 【Excel VBA】条件に合った行の表示・非表示を行う方法 3 2023/03/18 12:31
- Windows 10 画面上の[タスクバー]の位置の変更 1 2022/06/12 21:10
- その他(ゲーム) 横スクロールシューティングは完全2Dだけ? 2 2023/04/04 19:39
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
スクロールバーの表示位置を変えたい
JavaScript
-
画面表示とともにtableの指定の行位置を表示
JavaScript
-
テーブルの一部分のセルだけにスクロールバーを付けたいのですが、うまくいきません。
HTML・CSS
-
-
4
クリックされたセルの位置を取得するには?
JavaScript
-
5
tableの任意行にfocusをあてる
JavaScript
-
6
テーブル内の文字サイズを変更したい。
HTML・CSS
-
7
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
8
javascript クリックすると、あるテーブルのセルの色を複数個所変化させたい
JavaScript
-
9
テーブルの位置を細かく指定したい。
HTML・CSS
-
10
html+CSSでテーブルのスクロール(位置固定)
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで画像の移動
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
クリックで指定のテーブルの背...
-
selectのonChangeが動作しません
-
クリックごとに文字色が交互に...
-
<JavaScript>tableタグを入力不...
-
javascriptでスロットマシン
-
正規表現で複数マッチ条件で悩...
-
ボタン2回押しを無効にしたい
-
<form action="#">の意味とは?
-
<td>の中のonClick="location" で
-
JavaScriptにて動的に配列を作...
-
背景色を変えて未入力チェック...
-
【jsp/Java】チェックボックス...
-
selectを変更不可にしたい
-
selectを使った計算
-
セレクトメニューで選択された...
-
テキストフィールドに入力した...
-
フォームから入力すると、入力...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
プルダウンメニューを表の中に...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
どこに挿入?
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
Javascriptでテーブルタグの座...
-
動的なcheckboxのcheckedについて
-
javascriptで画像の移動
-
<iframe>内にHTMLをランダム表...
-
クリックごとに文字色が交互に...
-
javascriptでスロットマシン
-
連動テーブルのクロスハイライト
おすすめ情報