JavaScriptで月の行に移動する方法

前へ 次へ
このQ&Aのポイント
  • HTMLの一部に高さ指定（150px程度）のテーブルを作成し、スクロールによって見ることができる月毎の予定の情報があります。JavaScriptを使用して本日の日付（月）を取得し、該当の月の行に移動させたいと考えています。既に月のジャンプリンクを設定しているが、クリックせずに「今月」の位置に移動する方法がわかりません。
  • 今日の日付（月）をJavaScriptで取得し、該当の月の行に移動させるための方法を探しています。テーブルの上部には月のアンカーリンクが設定されており、クリックすることでジャンプすることができますが、自動的に「今月」の位置にジャンプさせて表示する方法が分かりません。
  • HTMLのテーブルには月毎の予定が表示されており、テーブルの上部には月ごとのジャンプリンクが設定されています。JavaScriptを使用して本日の日付（月）を取得し、自動的に「今月」の位置にジャンプさせて表示する方法を探しています。どなたかアドバイスをいただけませんか？
回答を見る
  • ベストアンサー

画面表示とともにtableの指定の行位置を表示

htmlの一部に 高さ指定（150px程度）のtableを作成し、 見出しは固定で、 内容は縦スクロールによって、見られるようにしている情報があります。 内容は月毎の予定のような情報になります。 これをこのhtmlを表示すると同時に JavaScriptで本日の日付（月）を取得し、該当の「月」の行に移動させたいのです。 tableの上に、1月、2月、3月、4月・・・とアンカー指定でジャンプできるように設定し 該当月をクリックすればその月の行にジャンプすることはできています。 これを、クリックしないで 「今月」の位置にジャンプさせて表示したいのです。 なかなかうまくいきません。 どなたか、アドバイスをお願いします。

  • jg1wjz
  • お礼率91% (148/162)

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.4

A No1～3です。 全体がよくわからないので、とりあえず、部分サンプルを何種類か作ってみましたが、ブラウザによって効かないものがあるようです。 （結構古いブラウザで試しているので、一般的と言えるのかどうかは不明です） 手元にあったFx16、IE6、Opera8で実験してみたところ、table内のページ内リンクはIE6が×、スクリプトでoffset値を計算する方法は一応ＯＫ、scrollIntoView()を利用する方法はOperaが×といった感じでした。 （トリガーは、それぞれボタンのクリックになっています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>Test Sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> div p{ margin:2em 0 0 0; } input{ width:2em; } #hoge{ width:300px; height:110px; overflow:auto; margin-top:2em; padding:0; } #hoge td{ width:300px; height:50px; vertical-align:top; border:1px solid #888; } </style> <script type="text/javascript"> function scroll(evt){ var t = target(evt); if(t){ var sc = 0; var d = document.getElementById("hoge") var p = d.getElementsByTagName("table")[0]; var elm = document.getElementById("month"　+　t.value); if(elm){ while(elm && elm!=p){ sc += elm.offsetTop; elm = elm.offsetParent; } if(elm) d.scrollTop = sc; } } } function s_view(evt){ var t = target(evt); if(t){ var id = "month" + t.value; document.getElementById(id).scrollIntoView(true); } } function target(evt){ var t = evt.target || evt.srcElement; return (t.nodeName=="INPUT")?t:null; } </script> </head> <body> <div> <p>[ ページ内リンク ]</p> <a href="#month1"><input type="button" value="1"></a> <a href="#month2"><input type="button" value="2"></a> <a href="#month3"><input type="button" value="3"></a> <a href="#month4"><input type="button" value="4"></a> <a href="#month5"><input type="button" value="5"></a> <a href="#month6"><input type="button" value="6"></a> </div> <div onclick="scroll(event)"> <p>[ スクリプトで計算してスクロール ]</p> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> </div> <div onclick="s_view(event)"> <p>[ scrollIntoView()による方法 ]</p> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> </div> <div id="hoge"> <table> <tr><td><a id="month1" name="month1">1月の記述</a></td></tr> <tr><td>　1月の2行目</td></tr> <tr><td><a id="month2" name="month2">2月の記述</a></td></tr> <tr><td>　2月の2行目</td></tr> <tr><td><a id="month3" name="month3">3月の記述</a></td></tr> <tr><td>　3月の2行目</td></tr> <tr><td><a id="month4" name="month4">4月の記述</a></td></tr> <tr><td><a id="month5" name="month5">5月の記述</a></td></tr> <tr><td><a id="month6" name="month6">6月の記述</a></td></tr> <tr><td><a id="month7" name="month7">7月の記述</a></td></tr> </table> </div> </body> </html>

jg1wjz
質問者

お礼

fujillinさん、ありがとうございました。 「scrollIntoView()」と 「スクリプトで計算してスクロール」の方法で実現できました。 scrollIntoView()がシンプルなのでこちらで・・・と思ったのですが、tableの見出し等の兼ね合いでしょうか、微妙に位置を調整したいので スクリプトで計算する方法にし、計算結果の値を少しマイナスすることで バッチリ、うまく表示できました！ まだ実現できただけで、内容の理解は不十分なのでこれから勉強したいと思います。 有難うございました！

その他の回答 (3)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

Ａ Ｎｏ1，2です。 ＞どうやったら　それぞれの<a>の位置を取得できるでしょうか？ 通常なら、対象となりうるリンク要素群を取得してチェックしてゆく方法が考えられますが、ご質問の場合は、各要素にidが振ってあって、そのidに合致する要素を取得したいのではないのでしょうか？ 要素の取得は、補足の文に記述なさっている、document.getElementById()で十分ではないでしょうか？ 縦スクロール量は、親要素までのoffsetTopを合計することで得られますが、ほかに考えられる方法として、 　・scrollIntoView()　（←tableの場合正しく動作するかどうか確認していません） 　・A No1で示したページ内リンクをクリックする方法 なども考えられると思いますが、状況に応じて適切な方法を選ぶのがよろしいかと思います。

jg1wjz
質問者

お礼

有難うございます。 試行錯誤、試してみてますが私の力量ではどうしてもうまくできません。 現在は、、、 function 初期処理(){ //table直前のdiv var p1=document.getElementById("in_Div").scrollTop; var p2=document.getElementById("in_Div").scrollHeight; ↓ //例えば、p1は0、p2は950　と取得できて 　　　 //現在月を求めて mm に入れ... switch(parseInt(mm, 10)){ case(4月の場合): pos=0; break; case(5月の場合): pos=72; break; case(6月の場合): pos=173; break; 　　　・ 　　　・ 　　　・ 　} //pos分だけjump document.getElementById("in_Div").scrollTop = pos; ・・・で暫定対処し、どうにかうまく動いています。 月ごとの指定は、table内に <tr class="section"> <td> <div id="m6"> <a id="mon6" name="mon6"></a> </div> </td> </tr> ・・・のように月ごとに1行、入れてあります。 （ちょっと変更してますので構文的不具合はスルー願います） 　　 posに、この行のid（m6 or mon6）の値を取得したいのです。 offsetの使い方がよくわかっていないのですが 実際にどうやったらいいのか、構文で教えていただければ助かります。 引き続き、よろしくお願いいたします。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

A No1です。 ＞tableの内容表示だけ変える・・・っていうのはできないものなのでしょうか？？？ 多分可能でしょう。 ロード時にスクリプトでURLを読んで、ご質問のような処理を行なえばよろしいかと思います。 ただし、ページ内のリンクへブラウザが移動するのと上記の処理が実行される順序によっては、全体のスクロール位置を調整するか、ブラウザのリンクへのジャンプを止める必要があるかもしれません。（実際が、どのようになるのか確認していません） スクリプトがオフの時などを考えると、#aaaのような指定方法がよろしいかと思いますが、ブラウザにジャンプさせないためには、クエリ部を利用して?page=aaaのような指定方法をとれば、ご質問の処理を呼び出すだけで済みます。 http://satussy.blogspot.jp/2011/06/javascripturl.html http://bl6.jp/web/javascript/location-search-query/

jg1wjz
質問者

お礼

すみません、技術力不足でうまくいきません。 と言いますか、 月によって可変になるscroll幅を数値で設定しておき、 document.getElementById("（tableのID）").scrollTop = 値; で暫定対処しました。（1年間は情報の変更が無いので） 月によって可変になる幅、つまり tableの内部に記述してある、 (例)<a id="month5" name="month5"> から <a id="month6" name="month6"> 間の幅・・・ということになり、本来は この<a>の位置（？）を取得して、それぞれ該当月を表示させたかったのですが 取得する方法がわかりませんでした。 どうやったら　それぞれの<a>の位置を取得できるでしょうか？

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

クライアントのマシンの設定に頼ることになりますが、日付（月）は 　new Date().getMonth()+1 で取得することができます。 tableの内容を解読して、そこまでスクロールさせることも可能ですが、それよりもページ内アンカーをすでに作成なさっているようですので、それをスクリプトからクリックする方が簡単ではないでしょうか？ 当該要素を element に取得できているとすれば、 　element.click(); で、いけるのではないかと…

jg1wjz
質問者

お礼

ありがとうございます！ 試してみます。 例えば、index.html#aaa　などでジャンプした場合、 どうしても「aaa」のところがページトップになってしまいますよね。 他の表示位置は変えずに、tableの内容表示だけ変える・・・っていうのはできないものなのでしょうか？？？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 画面表示とともに、テーブルの横スクロール位置を指定したい

    HTMLおよびJavaScriptに関して教えてください。 現在HTMLにテーブルタグを使用して、5か月分の日割りの表を作成しています。横に日付を設定する必要性から、テーブルの横スクロールを出して１画面で見せています。（かなり長い横スクロールのテーブルです） このとき、前月、今月、次月、次々月、次々次月と表示することとなり、表の始まりが前月となっています。 要望としては、画面を開いたときに、今月の位置で横スクロールされた状態になっていて欲しいのです。 縦の位置であれば、アンカーを使えば良さそうですが、テーブル内の横スクロールの制御は出来なそうで、、、 以上、よろしくお願いします。

  • JSで、テーブルのある行のみ、非表示/表示を切り替えたい

    こんにちは。 テーブル<Table>内に複数の行があります。 そのうちある行のみを、ボタンクリックにより表示/非表示を切り替えたいのです。 非表示といっても文字を消すのではなく、行そのものを隠したいのです。 用途としては、カテゴリ名「飲み物」をクリックすると、属している項目「ジュース」「お茶」などの行が見えるようにしたいのです。 JavaScriptで以上のようなことを実装できないか模索しております。 ヒントでも結構ですので、お教えいただけると助かります。 よろしくお願いします。

  • テーブルをＣＳＳの外部ファイルで表示するには

    テーブルをＣＳＳの外部ファイルを利用して表示させたいのですが 外部ファイルへの記入が間違っているのかうまくいきません。 作りたいテーブルは htmlで書くと <table border="1" cellspacing="0" bordercolor="#ffffff"> <tr><th colspan="4" bgcolor="#000000"> 見出し </th> </tr> <td width="125px"> 　内容１ </td> <td width="125px"> 内容２ 　</td> <td width="125px"> 内容３ 　</td> <td width="125px"> 内容４ 　</td> </tr> </table> といった感じです。 内容１～４も中心に寄せたいです。 テーブル全体は指定できても、th,tdの指定の仕方がよくわかりません。 外部ファイルにはどう書けばいいでしょうか。 初歩的かもしれませんがよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • divのheight指定で画面一杯に表示したい

    よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。 　html, body { 　　height: 100%; 　　margin: 0px; 　　padding: 0px; 　} 親子構造としては以下を想定しています(いくらか簡略化しています) <html> 　<body> 　　<div id="H" style="height:60px;"> 　　　(1)ここにヘッダー的なもの 　　</div> 　　<div id="B" style="height:100%; overflow: auto;"> 　　　(2)この部分を縦一杯にしたい 　　</div> 　</body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。 　<div id="B" style="height:100%; overflow: auto;"> 　　<div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div> 　　<div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div> 　　<div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div> 　　・・・ 　</div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 （divのoverflowが全く機能しません） 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 （縦一杯ではありませんがdivのoverflowは機能しました） 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか？

    • ベストアンサー
    • CSS
  • htmlで固定テーブルに可変データの表示の仕方

    htmlで５×４の固定テーブルにJavaScriptで取得したデータを表示させたいですが、 やり方が分かりません。 表示データ分テーブル行を追加表示することはできますが、表示は5行目までで、 6行目はスクロールして表示するようにしたいです。 さらに、5行固定で表示データが3行の場合空白2行も表示させたい。 具体的な方法や参考サイトを教えて下さい。 よろしくお願いします。

  • エクセル・行番地指定で画面変更可能？

    質問内容： 課題： シート１の複数のセルに行番地を意味する任意の数字が入力されていて、 それらのセルのひとつをクリックすれば、 シート２、もしくはシート３にあるデータの箇所まで自動でスクロールして 表示させたい。 :::::::：：：：：：：：：：：：：：： 以上が理想なのですが、それが無理ならば、シート１のなかのデータにおいて 自動でスクロールして 表示させることはできますか？ ＶＢＡマクロ、計算式などをつかって、それを実現する手立てはないでしょうか？ なお、シート１にシート２か３かを指定するため、別セルに２とか３と言う数字が あって、それを事前にクリックするということでもいいのですが。

  • javascriptでtableの該当行を削除ボタン

    javascriptで、テーブルの行を削除したいと思ってます。 行の最後のセルに削除ボタンを設け、該当行を消したいのですが、どなたかご教授お願いします。

  • 行の指定文字位置へ画面をスクロール

    下記のVBAコードでボタンクリックにより列そのまま行10を先頭画面へスクロールできたのですが作業上範囲内に行挿入項目(表ー2)が発生してきました。 このコードでは２行挿入したため行10の"梅田"が先頭と変わってしまいます。 表ー3のように都度行挿入後も"江藤"を先頭行にもってきたいため、 コードCells(10, ActiveWindow.ScrollColumn)の行部分を指定文字"江藤"を代入してコードを構成したいのですが？ どなたか解る方よろしくお願いします。 Sub 移動1() Application.Goto reference:=Worksheets("sheet1").Cells(10, ActiveWindow.ScrollColumn), Scroll:=True End Sub

  • <table>でスクロール連動をしたい

    おはよう御座います。 htmlテーブルの中に行、列の見出しと内容を 表示させ、テーブルをスクロールさせる際 見出しを見えるようにしたまま内容と 連動させたいのです。 （内容を横に動かせば横に見出しが動く） フレームでは↓のようにして実現可能なのですが テーブルではどのようにすればよいでしょうか？ http://mmosuper.zenno.info/

  • ASP.NET 動的に行を増やすTable

    ASP.NET（VB）アプリケーションでボタンが押される度に、 行を追加するTableを作りたいです。 初期表示時にPage_Initで5行のtableを作成するようにしています。 ボタンクリックイベントで行数を増やしていくのですが、 他のコントロール(asp.textbox)のテキストチェンジイベントでPostBackが発生すると、 元の5行に戻ってしまいます。 Page_Initで5行と指定しているためなので、 ここの指定数をPostBack前に保持した行数にすれば良いと思ったのですが、 もっと他にスマートな方法はありませんでしょうか？ もし、保持する方法をとる場合は、セッションなどで保持するべきでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する