WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:table(複数列)で行選択のイメージを実現したい

0:[投稿] まめ [2004/03/25 16:07 ][環境:win2k,NetScape7.0 スタンドアロン]

初めまして。
htmlのtable(複数列)上でマウスオーバー時に色を変えて
(マウスオフ時には色を戻して)、
その行全体が選択されているようなイメージを
java scriptを使って実現しようと考えています。
ieでは、window.event.srcElement.uniqueID を使って
実現できましたが、NetScape(特に7.0)での方法が分かりません。

良い方法をご存知の方、どうかご教授下さい。
よろしくお願いします。


1:[回答] Yachimata [2004/03/25 17:57 ]

引数に this.id が設定されているのであれば、以下のような感じでしょうか。

window.document.getElementById(ids).style.backgroundColor = "pink";

win98se / Netscape 7.01 にて確認済みです。


2:[回答] Yachimata [2004/03/25 18:16 ]

因みに window.event はIE限定です。


3:[回答] … [2004/03/25 18:34 ]

event.srcElement というのは MSIE の独自仕様で,標準仕様ではありません。
標準仕様の方法で実現するには,DOM2 Events のインタフェイスを利用します。
http://www.w3.org/TR/DOM-Level-2-Events/events
しかし,MSIE は DOM1 までの実装なので,独自仕様と併用しなければなりません。

以下の例は,MSIE6,Netscape6以降/Mozilla, Opera 7 で動作します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>test</title>
</head>
<body>
<table border="1">
<tbody id="test-tbody">
 <tr>
   <td>foo..</td>
   <td>bar...</td>
 </tr>
 <tr>
   <td>baz...</td>
   <td>quux...</td>
 </tr>
</tbody>
</table>
<script type="text/javascript">
if ( table = document.getElementById('test-tbody') )
{
 if (document.attachEvent)
 {
   table.attachEvent('onmouseover', rowColor);
   table.attachEvent('onmouseout' , rowColor);
 }
 else if (document.addEventListener)
 {
   table.addEventListener('mouseover', rowColor, false);
   table.addEventListener('mouseout' , rowColor, false);
 }
}
function rowColor(e)
{
 var node  = (document.all ? event.srcElement : e.target);
 var etype = (document.all ? event.type : e.type);
 if (node.parentNode.nodeName.toLowerCase() != 'tr') return;
 node.parentNode.style.backgroundColor =
   (/mouseover/.test(etype) ? 'silver' : 'white');
}
</script>
</body>
</html>


4:[質問] まめ [2004/03/25 18:45 ]

Yachimataさん、回答ありがとうございます。

初めて間も無く、頂いた回答の意味すら理解できないのですが
以下の様にすれば良いのでしょうか?
----------------------------------------------------------------------------------------------------
function fnc_sample(ids) {

    //表示行数
    window.document.getElementById(ids).style.backgroundColor = "pink";
}

〜中略〜
<table id="tab_a">
 <tbody id="list_a" style="cursor:hand" mouseover="fnc_sample(this.id)" onmouseout="〜" onclick="〜">
 <tr>

----------------------------------------------------------------------------------------------------

何度もすみませんが、教えて頂けませんでしょうか?
よろしくお願いします。


5:[回答] … [2004/03/25 18:46 ]

実は上記の場合,Netscape6以降/Mozilla では,
CSS だけで簡単に実現できたりします。

<style type="text/css">
#test-tbody > tr:hover {
 background-color: silver;
}
</style>


6:[回答] まめ [2004/03/25 19:05 ]

ソースまでご提供下さり、本当に助かります。

ちなみに、マウスクリック時等に「何行目が選択されたか」と
いう判断は、可能なのでしょうか?
よろしければ、教えて下さい。



7:[回答] … [2004/03/25 19:26 ]

>>6
こんな感じでどうでしょう。
<table border="1">
<tbody id="test-tbody">
 <tr>
   <td>foo..</td>
   <td>bar...</td>
 </tr>
 <tr>
   <td>baz...</td>
   <td>quux...</td>
 </tr>
 <tr>
   <td>hoge...</td>
   <td>hogehoge...</td>
 </tr>
</tbody>
</table>
<script type="text/javascript">
if ( table = document.getElementById('test-tbody') )
{
 if (document.attachEvent)
 {
   table.attachEvent('onclick', rowNumber);
 }
 else if (document.addEventListener)
 {
   table.addEventListener('click', rowNumber, false);
 }
}
function rowNumber(e)
{
 var node  = (document.all ? event.srcElement : e.target);
 if (node.nodeName.toLowerCase() != 'td') return;
 alert(node.parentNode.sectionRowIndex+1);
}
</script>


8:[回答] … [2004/03/25 20:48 ]

>>0 >>4 >>6
いちいち人に訊いていたら限りがないとは思いませんか?
JavaScript なり DOM なりを勉強してみてください。
http://www.parkcity.ne.jp/~chaichan/src/javascdom00.htm
http://www.doraneko.org/misc/dom10/19981001/cover.html

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World