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

解決済

質問者：jg1wjz
質問日時：2013/05/15 17:09
回答数：4件

htmlの一部に
高さ指定（150px程度）のtableを作成し、
見出しは固定で、
内容は縦スクロールによって、見られるようにしている情報があります。

内容は月毎の予定のような情報になります。

これをこのhtmlを表示すると同時に
JavaScriptで本日の日付（月）を取得し、該当の「月」の行に移動させたいのです。

tableの上に、1月、2月、3月、4月・・・とアンカー指定でジャンプできるように設定し
該当月をクリックすればその月の行にジャンプすることはできています。

これを、クリックしないで
「今月」の位置にジャンプさせて表示したいのです。

なかなかうまくいきません。
どなたか、アドバイスをお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： fujillin
回答日時：2013/05/22 17:30

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>

- 0
- 件

通報する

この回答へのお礼

fujillinさん、ありがとうございました。

「scrollIntoView()」と
「スクリプトで計算してスクロール」の方法で実現できました。
scrollIntoView()がシンプルなのでこちらで・・・と思ったのですが、tableの見出し等の兼ね合いでしょうか、微妙に位置を調整したいので
スクリプトで計算する方法にし、計算結果の値を少しマイナスすることで
バッチリ、うまく表示できました！

まだ実現できただけで、内容の理解は不十分なのでこれから勉強したいと思います。
有難うございました！

通報する

お礼日時：2013/05/24 11:40

No.3

回答者： fujillin
回答日時：2013/05/20 18:03

ＡＮｏ1，2です。

＞どうやったら　それぞれの<a>の位置を取得できるでしょうか？
通常なら、対象となりうるリンク要素群を取得してチェックしてゆく方法が考えられますが、ご質問の場合は、各要素にidが振ってあって、そのidに合致する要素を取得したいのではないのでしょうか？

要素の取得は、補足の文に記述なさっている、document.getElementById()で十分ではないでしょうか？
縦スクロール量は、親要素までのoffsetTopを合計することで得られますが、ほかに考えられる方法として、
　・scrollIntoView()　（←tableの場合正しく動作するかどうか確認していません）
　・A No1で示したページ内リンクをクリックする方法
なども考えられると思いますが、状況に応じて適切な方法を選ぶのがよろしいかと思います。

- 0
- 件

通報する

この回答へのお礼

有難うございます。
試行錯誤、試してみてますが私の力量ではどうしてもうまくできません。

現在は、、、

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の使い方がよくわかっていないのですが
実際にどうやったらいいのか、構文で教えていただければ助かります。

引き続き、よろしくお願いいたします。

通報する

お礼日時：2013/05/22 11:30

No.2

回答者： fujillin
回答日時：2013/05/17 21:26

A No1です。

＞tableの内容表示だけ変える・・・っていうのはできないものなのでしょうか？？？
多分可能でしょう。
ロード時にスクリプトでURLを読んで、ご質問のような処理を行なえばよろしいかと思います。
ただし、ページ内のリンクへブラウザが移動するのと上記の処理が実行される順序によっては、全体のスクロール位置を調整するか、ブラウザのリンクへのジャンプを止める必要があるかもしれません。（実際が、どのようになるのか確認していません）

スクリプトがオフの時などを考えると、#aaaのような指定方法がよろしいかと思いますが、ブラウザにジャンプさせないためには、クエリ部を利用して?page=aaaのような指定方法をとれば、ご質問の処理を呼び出すだけで済みます。

http://satussy.blogspot.jp/2011/06/javascripturl …
http://bl6.jp/web/javascript/location-search-que …

- 0
- 件

通報する

この回答へのお礼

すみません、技術力不足でうまくいきません。

と言いますか、
月によって可変になるscroll幅を数値で設定しておき、
document.getElementById("（tableのID）").scrollTop = 値;
で暫定対処しました。（1年間は情報の変更が無いので）

月によって可変になる幅、つまり
tableの内部に記述してある、
(例)<a id="month5" name="month5">
から
<a id="month6" name="month6">
間の幅・・・ということになり、本来は
この<a>の位置（？）を取得して、それぞれ該当月を表示させたかったのですが
取得する方法がわかりませんでした。

どうやったら　それぞれの<a>の位置を取得できるでしょうか？

通報する

お礼日時：2013/05/20 09:53

No.1

回答者： fujillin
回答日時：2013/05/15 19:10

クライアントのマシンの設定に頼ることになりますが、日付（月）は

　new Date().getMonth()+1
で取得することができます。

tableの内容を解読して、そこまでスクロールさせることも可能ですが、それよりもページ内アンカーをすでに作成なさっているようですので、それをスクリプトからクリックする方が簡単ではないでしょうか？

当該要素を element に取得できているとすれば、
　element.click();
で、いけるのではないかと…