テーブル横の行の背景色を変えるには

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

0   名前： 初心者です。 ： 2006/12/27（水） 17:19  ID:NvGleDjg
マウスオーバーを行うときに、
一つのセルにカーソルが置かれたときにのみ
その横一行の背景色が変わる、というものを
行いたいと思っています。

下に簡単なサンプルを書きました。
これを例としますと、
”○”にカーソルが置かれますと”あ”と”い”も一緒に
背景色が変わります（”あ”や”い”にカーソルを置いても背景色は変わりません）。
同じく”△”にカーソルが置かれると”か”と”き”も
背景色が変わります。
あるサイトでこのような例題を出していたのですが
IE6.0ででは対応していなかったらしく
できませんでした。

また、できましたらリンクではなくclassなどで属性を
指定したいと思っています。

<table border="1">
<tr>
<td id="nostyle">
<tr>
<th>あ</th><th>い</th><th>○</th>
</tr>
<tr>
<td>か</td><td>き</td><td>△</td>
</tr>
<tr>
<td>さ</td><td>し</td><td>□</td>
</tr>
</table>
</body>
</html>


難しい質問ではあるかと思いますが
どうぞ宜しくお願いします。
1   名前： カヅサツ ◆ThCi95HEzw ： 2006/12/27（水） 17:19  ［URL］  ID:O5hEMlpW
確認です。

・変更後の色は、1種類ですか？
・ポインタが外れた時に、色を戻す必要はありますか？
・「リンクではなくclassなどで属性を指定したいと思っています」の意味がわかりません。
　「あるセルをポイントすると、その行の背景色が変わる」ことに、リンクや class がどう関わりますか？

2   名前： 匿名 ： 2006/12/27（水） 17:19  ID:NvGleDjg
コメントしてくださってありがとうございます！
すみません。足りませんでしたね。
まず
変更の色は１種類です。
スタイルシートを別に作成していまして、
そちらの方には元の色はバックカラーが白で文字は黒、
としてあります。

ポインタが外れたら元の色(バックカラーは白で文字は黒)に
戻ります。

classにしたのはリンクで飛ばす必要がなかったことと
class指定をして”○”の部分にマウスを置いたら
色が変わったのでclass指定の方が都合が良いのかなと
思ったためです。
自分でそう思っただけですので
関係ないようでしたらここは気にしないで下さい。

宜しくお願いします。
3   名前： Q2 ： 2006/12/27（水） 17:19  ID:jJPULJTi
>>0のテーブルの構造が崩れているように見えるんですが、これはこれで
いいのですか。TDにSTYLEを設定してあるので、意味があるとは思うんですが。
4   名前： 匿名 ： 2006/12/27（水） 17:19  ID:NvGleDjg
すみません！
仕様の変更がありまして先ほどとは少々違う回答をしても
よろしいでしょうか。。。

デフォルトで、たとえば”□”の行に予め背景色が
指定してあって他の、”○”や”△”をクリックをしたら
色が変わってほしいです！

5   名前： 初心者です。 ： 2006/12/27（水） 17:19  ID:NvGleDjg
構造は大丈夫かと思われます。
6   名前： カヅサツ ◆ThCi95HEzw ： 2006/12/27（水） 17:19  ［URL］  ID:O5hEMlpW
>>4が最終案ですね。そうしますと

(1) 色が変わって欲しい行の tr要素に、id属性で適切な名前を付ける
(2) JavaScript で (1)の style.backgroundColor を特定の色に書き換える関数を書く
(3) クリックして欲しいセルの td要素の onclick属性に、(2)の関数を書く

こんな塩梅でしょうか。
7   名前： 初心者です。 ： 2006/12/27（水） 17:19  ID:NvGleDjg
コメントを参考にこのようなものを発見しました。
実際に行ってみますと想像通りのものでした。
ですがスタイルシートの記述の仕方が
いまいちわかりません。
この場合、スタイルシートと分けて書くときは
どのようにすべきでしょうか。

<HTML><HEAD><TITLE>クリック場所</TITLE>
<style type="text/css">
<!--

-->
</style>
<SCRIPT Language="JavaScript">
<!--
var lst;
function sel(){
if(lst)lst.style.backgroundColor=document.body.style.backgroundColor;
if((window.event.srcElement.tagName=='TD')&&(window.event.srcElement.className=='click')){
lst=window.event.srcElement.parentElement;
//lst.style.backgroundColor='blue';
}
}
document.onclick=sel;
-->
</SCRIPT>
</HEAD>
<BODY>
<table border="1">
<tr>
<td>
<tr>
<td>あ</td><td>い</td><td class="click">○</td>
</tr>
<tr>
<td>か</td><td>き</td><td>△</td>
</tr>
<tr>
<td>さ</td><td>し</td><td>□</td>
</tr>
</table>
</body>
</html>
8   名前： 初心者です。 ： 2006/12/27（水） 17:19  ID:NvGleDjg
すみません。
なんだかあせってしまっているようで、
足りない項目を発見してしまいました。
ですのでもう一度掲示し直させてください。

<HTML><HEAD><TITLE>クリック場所</TITLE>
<style type="text/css">
<!--

-->
</style>
<SCRIPT Language="JavaScript">
<!--
var lst;
function sel(){
if(lst)lst.style.backgroundColor=document.body.style.backgroundColor;
if((window.event.srcElement.tagName=='TD')&&(window.event.srcElement.className=='click')){
lst=window.event.srcElement.parentElement;
//lst.style.backgroundColor='blue';
}
}
document.onclick=sel;
-->
</SCRIPT>
</HEAD>
<BODY>
<table border="1">
<tr>
<td>
<tr>
<td>あ</td><td>い</td><td class="click">○</td>
</tr>
<tr>
<td>か</td><td>き</td><td class="click">△</td>
</tr>
<tr>
<td>さ</td><td>し</td><td class="click">□</td>
</tr>
</table>
</body>
</html>

この記述で行われるものが
実際に行いたいことです。
失礼しました。
9   名前： K+S ： 2006/12/27（水） 17:19  ID:nROqylMa
実装しろといわれれば >>6 でカヅサツさんが仰られているようなものになりますが。

>>7-8
検証しやすいようにページそのものを提示するようにしてください。
ソースだけ示されても実現できなければ評価のしようがありません。
一覧へ戻る