選択文字列のハイライト表示

[新着] Webテンプレートを仮オープンしました

0   名前： 紅' ： 2007/09/23（日） 14:09  ID:gyt6jf6W sub-20
現在、データを検索して HTML で結果を一覧表示するプログラムを作成しています。
表示するデータは１行１件で、表示された文字列をクリックすることで
２分された画面の下半分により詳細なデータを表示します。

上半分に表示している一覧の表示部分について、選択(クリック)した文字列を
「選択中である」ことを判りやすくするため、反転表示や背景色を変える方法を
探しているのですが、うまく見つけることが出来ませんでした。
( 検索に使用したキー : HTML or JavaScript、ハイライト or 反転表示 )

お心当たりがございましたらご教示いただけないでしょうか。
よろしくお願いします。
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/09/23（日） 14:09  ［URL］  ID:O5hEMlpW sub-r2
> 現在、データを検索して HTML で結果を一覧表示するプログラムを作成しています。
> 表示するデータは１行１件で、表示された文字列をクリックすることで
> ２分された画面の下半分により詳細なデータを表示します。

1.プログラムよって出力されるページをページAとする(プログラム)
2.上下にフレーム分割したページを作る。上フレームをページAにする(HTML)
3.「表示された文字列」を箇条書きリストにし、このul要素にid属性で適当に名前を付ける(datalistと仮名)(HTML)
4.「表示された文字列」を「詳細なデータ」へのリンクにする。リンクの表示先は下フレームにする
5. ページの背景やリンクのフォント色を指定しておく(スタイルシート)
6.「datalist内のすべてのa要素のフォント色を既訪リンクと同じ色にし、背景色をなくす、
　　そして引数で与えられたオブジェクトのフォント色と背景色を変える」という関数を用意(JavaScript)
7. 「クリックすると、自分自身を引数として 6 を起動する」という処理を、
　　datalist内の全リンクに付ける(JavaScript)

蛇足ですがこの場合は左右分割の方が読みやすいかと
2   名前： 匿名 ： 2007/09/23（日） 14:09  ID:XZL5hbgW sub-y9
データは１行１件という表現からtableを使っていると推測しました
function hilight(a) {
  var idx = a.parentNode.parentNode.rowIndex;
  var table = document.getElementById('datatable');
  for (var i = table.rows.length; i--; ) {
    if (i == idx) {
      table.rows[i].style.backgroundColor = '#ff6';
    } else {
      table.rows[i].style.backgroundColor = 'transparent';
    }
  }
}
<table id="datatable">
  <!-- thead... -->
  <tbody>
    <tr><td><a href="item1.html" target="bottomframe" onclick="hilight(this)">1</a></td><td>...</td></tr>
    <tr><td><a href="item2.html" target="bottomframe" onclick="hilight(this)">2</a></td><td>...</td></tr>
  </tbody>
</table>
3   名前： 紅' (解決) ： 2007/09/23（日） 14:09  ID:WaJ4Jgjn sub-EO
返信をありがとうございます。
遅くなりました。すみません。

お教えいただいた方法で動作を確認できました。
いろいろと方法があるのですね。
まだちゃんと理解できていないところもあり、本番環境に適用するに際に分からない点などが生じたら
またご質問をさせていただけたらと思います。

助かりました。感謝します。

>蛇足ですがこの場合は左右分割の方が読みやすいかと
既存環境のカスタマイズなので変更できないのです。(^^;
一覧へ戻る