![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
行数の多い一覧で任意の行にスクロールするのが面倒で、
各行のキーになるような値の入ったドロップダウンリスト(以下DL)を設け、
それを選択して該当行を先頭に表示できないか考えています。
●画面イメージ
[A |▼] ←DL
|A|データA1|
|A|データA2|
|B|データB1|
:
|Z|データZn|
DLには"A"~"Z"までが格納されていて、
例えば"Y"の選択でYの行を先頭に表示できればと思います。
そようなDLと、飛び先アンカー<A>を適宜埋め込んだhtmlを作成しました。
DL選択時のonchangeのJavaScriptで選択値に該当する<A>に飛ばす、
なんてできますでしょうか。
そもそもこんな方法はムリかもと思いつつ、お知恵があればと思い質問いたしました。
どうか宜しくお願い致します。
●html
<html>
<head>
<SCRIPT language="Javascript">
<!--
function onChangeKeyList() {
var v = document.thisForm.keyList.value;
※ vにDLで選択した値を取り出す。
これを使って<a name="..."/>に何とか飛べないか???
return false;
}
-->
</SCRIPT>
</head>
<body>
<form>
<select name="keyList" onchange="onChangeKeyList();">
<option value="A">A</option>
:
<option value="Z">Z</option>
</select>
<table>
<A name="A" /> ←アンカー
<tr>
<td>A</td><td>データA1</td>
</tr>
<tr>
<td>A</td><td>データA2</td>
</tr>
<A name="B" /> ←アンカー
<tr>
<td>B</td><td>データB1</td>
</tr>
:
</table>
</form>
</body>
</html>
No.3ベストアンサー
- 回答日時:
location.hrefでの方法(#2の方法も)うまくいかない場合、scrollToを使ってスクロールするというのはどうでしょうか
posは、実際にはマージンなんかを考慮する必要があるので、ブラウザによって微調整が必要かもしれません。
サンプル
<html>
<head>
<SCRIPT type="text/javascript">
<!--
function onChangeKeyList(list) {
var v = list.value;
var pos=document.getElementById(v).offsetTop;
window.scrollTo(0,pos);
//return false;
}
-->
</SCRIPT>
</head>
<body>
<form>
<select name="keyList" onchange="onChangeKeyList(this);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
<option value="L">L</option>
<option value="M">M</option>
<option value="N">N</option>
<option value="O">O</option>
<option value="P">P</option>
<option value="Q">Q</option>
<option value="R">R</option>
<option value="S">S</option>
<option value="T">T</option>
<option value="U">U</option>
<option value="V">V</option>
<option value="W">W</option>
<option value="X">X</option>
<option value="Y">Y</option>
<option value="Z">Z</option>
</select>
<table border="1">
<tr id="A"><td>A</td><td>データA1</td></tr>
<tr> <td>A</td><td>データA2</td></tr>
<tr id="B"><td>B</td><td>データB1</td></tr>
<tr> <td>B</td><td>データB2</td></tr>
<tr id="C"><td>C</td><td>データC1</td></tr>
<tr> <td>C</td><td>データC2</td></tr>
<tr id="D"><td>D</td><td>データD1</td></tr>
<tr> <td>D</td><td>データD2</td></tr>
<tr id="E"><td>E</td><td>データE1</td></tr>
<tr> <td>E</td><td>データE2</td></tr>
<tr id="F"><td>F</td><td>データF1</td></tr>
<tr> <td>F</td><td>データF2</td></tr>
<tr id="G"><td>G</td><td>データG1</td></tr>
<tr> <td>G</td><td>データG2</td></tr>
<tr id="H"><td>H</td><td>データH1</td></tr>
<tr> <td>H</td><td>データH2</td></tr>
<tr id="I"><td>I</td><td>データI1</td></tr>
<tr> <td>I</td><td>データI2</td></tr>
<tr id="J"><td>J</td><td>データJ1</td></tr>
<tr> <td>J</td><td>データJ2</td></tr>
<tr id="K"><td>K</td><td>データK1</td></tr>
<tr> <td>K</td><td>データK2</td></tr>
<tr id="L"><td>L</td><td>データL1</td></tr>
<tr> <td>L</td><td>データL2</td></tr>
<tr id="M"><td>M</td><td>データM1</td></tr>
<tr> <td>M</td><td>データM2</td></tr>
<tr id="O"><td>O</td><td>データO1</td></tr>
<tr> <td>O</td><td>データO2</td></tr>
<tr id="P"><td>P</td><td>データP1</td></tr>
<tr> <td>P</td><td>データP2</td></tr>
<tr id="Q"><td>Q</td><td>データQ1</td></tr>
<tr> <td>Q</td><td>データQ2</td></tr>
<tr id="R"><td>R</td><td>データR1</td></tr>
<tr> <td>R</td><td>データR2</td></tr>
<tr id="S"><td>S</td><td>データS1</td></tr>
<tr> <td>S</td><td>データS2</td></tr>
<tr id="T"><td>T</td><td>データT1</td></tr>
<tr> <td>T</td><td>データT2</td></tr>
<tr id="U"><td>U</td><td>データU1</td></tr>
<tr> <td>U</td><td>データU2</td></tr>
<tr id="V"><td>V</td><td>データV1</td></tr>
<tr> <td>V</td><td>データV2</td></tr>
<tr id="W"><td>W</td><td>データW1</td></tr>
<tr> <td>W</td><td>データW2</td></tr>
<tr id="X"><td>X</td><td>データX1</td></tr>
<tr> <td>X</td><td>データX2</td></tr>
<tr id="Y"><td>Y</td><td>データY1</td></tr>
<tr> <td>Y</td><td>データY2</td></tr>
<tr id="Z"><td>Z</td><td>データZ1</td></tr>
<tr> <td>Z</td><td>データZ2</td></tr>
</table>
</form>
</body>
</html>
BLUEPIXYさん、たびたびありがとうございます。
おかげさまで無事動作するようになりました。
実はscrollToを試してみたところ誤差が大きかったので、
どれだけ調整してやればよいか調べようとしたのですが、
その時にふと上に載せてくださったhtmlを見て気付きました。
僕のhtmlでは<tr>の前の必要な箇所に<A>を付けていたのですが、
上のサンプルでは<tr id="...">とされていますね。
この方法でうまく行くようになりました。
結局BLUEPIXYやsteel_grayに教えて頂いたNo.1やNo.2での回答に、
今回教えて頂いた<tr id="...">の組み合わせで動作しました。
テーブル中の<A>は動作しないのかな。
丁寧にサンプルを載せてくださったおかげで解決できました。
ありがとうございました。
お礼が遅くなってすみませんでした。
No.2
- 回答日時:
ファイル名なしでもいけるんじゃなかったかな?
location.href="#"+v;
steel_grayさん、アドバイスをどうもありがとうございます。
実はNo.1の回答を頂いた際、この方法でも試してみたのですが、
それでもうまくいかず悩んでいたのですが、
結局僕の作成したhtml中の飛び先の指定の仕方がマズかったのだと分かりました。
その部分を直してこのファイル名を指定しない方法でlocation.hrefし、
今では無事動作するようになりました。
どうもありがとうございました。
お礼が遅くなってすみません。
No.1
- 回答日時:
試してはいないですけど
location.href="self.html#"+v;
でいいんじゃないかと思います。
この回答への補足
BLUEPIXYさん、早速のアドバイスをありがとうございます。
今回の質問では、簡単のためhtmlとしましたが、
実際はtomcat+strutsの環境上のservletで用いるjspでして、
教えて頂いた
location.href="self.html#"+v;
のうち、"self.html"に該当する部分をどう指定すればよいのか分かりません。
ちなみにlocation.hrefの値をalertを使って表示してみると、
http://remoteServer:8080/myServlet/setupThisForm …
※ここで
remoteServer:サーブレットを構築しているサーバ名
myServlet:アプリケーションURI
setupThisForm.do:thisForm.jspを構築するaction
となっており、どうもこれを操作するのではないような気がしました。
documentオブジェクトを使うのかなと推測していろいろ調べていますが、まだ未解決です。
もし何かご存知でしたら、またご教授ください。
よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableの任意行にfocusをあてる
-
一覧から選択した行の行番号を...
-
至急!GetElementById でtdの...
-
プルダウンで選択すると、DBの...
-
階層式メニューをtableタグ内に
-
【JQuery】テーブルで行選択さ...
-
JavaScriptで特定のtdタグにcla...
-
ハイパーリンクを別ウインドウ...
-
動的なtableの値を取得したい
-
テーブルの項目の値取得
-
\\u30ad\\u30fc\\u30dc・・・と...
-
domでの削除
-
tdの中をクリックしたらチェッ...
-
javascript クリックすると、あ...
-
jspのエラー
-
Selectボックスの幅を自動で広...
-
onchangeイベントを強制的に発...
-
ボタン2回押しを無効にしたい
-
<JavaScript>tableタグを入力不...
-
return trueとreturn falseの用...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報