tableの任意行にfocusをあてる

質問

行いたいこと
tableタグにあるTHREDタグとTBODYタグがあり、現在はTBODYタグの任意行を選択するとその行の色が変わるようになっています。
サーバアクションで画面遷移を行ったりした後、その画面に戻ってくる時に以前選択されていた行が存在したらそこで色が変わるようにしています。
そこで問題なのですが、その画面に戻ってきた時にしたのほうが選択行だった場合フォーカスが当たり、すくロースして表示してないと一瞬どこいった？という風に感じてしまいます。なので、そこの行まで飛ばしてやりたいのですが、できるでしょうか？
選択行の色変えには以下の関数を作って行っています。

function syncroData() {
for(var i = 1 ; i < table10.rows.length ; i++){
if(i == hojirowid) {
table10.rows[i].style.backgroundColor = "yellow";
} else {
if(i%2 == 0){
table10.rows[i].style.background = "#fff8dc";
}else{
table10.rows[i].style.background = "#f5fffa";
}
}
}

試しにfor文が終わった後に
table10.rows[i].focus();
と記述してみましたが、そういうメソッドが使えないのかそこまで飛んでくれませんでした（もしかしたら、フォーカスだけあたってスクロールしなかっただけ？）

以上、宜しくお願い致します。

回答No.3

leaz024 · ベストアンサー

スクロールさせたい位置を調べて、scrollTo すればよいのでは？

var node = table10.rows[i];
var y = 0;
while (node.tagName.toUpperCase() != "BODY") {
　　y += node.offsetTop;
　　node = node.parentNode;
}
window.scrollTo(0, y);

※インデントは全角空白なので、コピーする場合はタブなどに変えてください。

お礼

レスが遅れました・・・・・納期ぎりぎりでやってたもんで・・・・

scrollToメソッドについては知りませんでした・・
今回はできないということで、相手側に伝えてしまったので、次回以降に役立てたいと思います。
ありがとうございました。

回答No.2

dayowl

私の解釈が間違っているかも・・・

表の任意行までスクロールさせたいのなら表の各行に
こんな↓感じで<a name=..">を入れておいて
<table>
<tr><td><a name="001">A</a></td><td>B</td><td>c</td></tr>
<tr><td><a name="002">A</a></td><td>B</td><td>c</td></tr>
</table>
戻るときに
document.location.href="hoge.html#002"
とか
<a href="hoge.html#002">もどる</a>
とやれば、その行のあたりが表示されますので、
「#002」の部分を動的に変更してやれば良さそうですが。。。。

お礼

レスが遅れました・・・・・納期ぎりぎりでやってたもんで・・・・
今回のテーブルの中身はxmlでのBindDataで処理を行っているため、単純にaタグを入れ込めそうにありませんでした。
今後の参考にしたいと思います。ありがとうございました。

回答No.1

Dpop

僕の知っている範囲では、できないと思いますが。。。

ちょっと誤解がある様なので、

> 試しにfor文が終わった後に
> table10.rows[i].focus();
> と記述してみましたが、そういうメソッドが使えないのかそこまで飛んでくれませんでした（もしかしたら、フォーカスだけあたってスクロールしなかっただけ？）

どうやら、フォーカスの意味を取り違えているようです。
フォーカスと言うのは、そのフォームの中の指定された名前を、処理の対象としますよ。と言う意味であって、そこへ移動しますよ。と言う意味ではありません。

なので、

> （もしかしたら、フォーカスだけあたってスクロールしなかっただけ？）

その通りです。

Webの場合、見ている人のブラウザ環境が同じであるとは限らないので、そう言う処理はサポートされていない。と言うパターンが多いのですよね。

お礼

レスが遅れました・・・・・納期ぎりぎりでやってたもんで・・・・
textareaなどは、focusを当てるとそこに飛ぶのでスクロールするのですが、この場合はあくまでテーブルにフォーカスが当たっているようで、スクロールはしないようですね^^;
回答ありがとうございました