表があります。
表の中にあるリンク(ポップアップ)をクリックします。
この時、クリックした行の背景色を変更したいのですが、可能でしょうか。

素人が考えつくのは
オンクリック使って・・
とそこまで (^^;

A 回答 (1件)

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


<html>
<head>
<title>テーブルの行取得</title>
<script language="JavaScript">
<!--
function gyo_ni_iro(color,obj)
{
obj.parentElement.parentElement.bgColor=color;
}
//-->
</script>
</head>
<body>
<table border="1">
<tr>
<!--gyo_ni_iro(色,this)-->
<td><a href="http://www.goo.ne.jp/" target="_blank" onClick="gyo_ni_iro('red',this)">goo(赤)</a></td>
<td><a href="http://www.goo.ne.jp/" target="_blank" onClick="gyo_ni_iro('blue',this)">goo(青)</a></td>
</tr>
<tr>
<td><a href="http://www.goo.ne.jp/" target="_blank" onClick="gyo_ni_iro('yellow',this)">goo(黄)</a></td>
<td><a href="http://www.goo.ne.jp/" target="_blank" onClick="gyo_ni_iro('lime',this)">goo(緑)</a></td>
</tr>
</table>
</body>
</html>
----------------------------------------------------------------------

こんな感じでしょうか。
関数gyo_ni_iroには引数に色名とthisを渡して
Aから見て親の親の要素であるTRの背景色を受け取った引数の色に変更します。

gooのリンクがポップアップで新ウィンドウとして出て、
行の背景色も指定された色に変更されます。

IE6で動作確認。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QポップアップメニューAの選択によってポップアップメニューBの内容を変更させる方法

一つのフォーム内にポップアップメニューが2つあり、ポップアップメニューAが変更されたときに、ポップアップメニューBの内容を変更したいのですが、そういうことは出来るのでしょうか。
もし、出来るのであればどのようにすれば出来るでしょうか。

よろしくお願いします。

<例>
ポップアップメニューAの内容
1.選択A
2.選択B

ポップアップメニューBの内容
 ○ポップアップメニューAで「1.選択A」が選択されているとき
  1.値A
  2.値B
  3.値C
 ○ポップアップメニューBで「2.選択B」が選択されているとき
  1.結果A
  2.結果B
  3.結果C

Aベストアンサー

こんばんは、xruzです。
こんな感じですか? Ie5.5sp2で動作確認済み。

<head>
<title></title>
</head>
<script language="JavaScript">
<!--
var op=[
[["v1","値1"],["v2","値2"],["v3","値3"]],
[["r1","結果1"],["r2","結果2"],["r3","結果3"]]
];
function setOp(o) {
with(document.f.s2) {
options.length=op[o].length;
for(var i=0;i<op[o].length;i++) {
options[i].value=op[o][i][0];
options[i].text=op[o][i][1];
}}
}
function sj() { setOp(0); }
//-->
</script>
<body onLoad="sj()">
<form method="post" name="f">
<select name="s1" size="1" onChange="setOp(this.value);">
<option value="0">選択A
<option value="1">選択B
</select>
<select name="s2" size="1">
</select>
</form></body>
</html>

がんばってくださいね(~:~i

こんばんは、xruzです。
こんな感じですか? Ie5.5sp2で動作確認済み。

<head>
<title></title>
</head>
<script language="JavaScript">
<!--
var op=[
[["v1","値1"],["v2","値2"],["v3","値3"]],
[["r1","結果1"],["r2","結果2"],["r3","結果3"]]
];
function setOp(o) {
with(document.f.s2) {
options.length=op[o].length;
for(var i=0;i<op[o].length;i++) {
options[i].value=op[o][i][0];
options[i].text=op[o][i][1];
}}
}
function sj() { setOp(0); }
//-->
</s...続きを読む

Qリンクをクリックするとポップアップで親ウィンドウが開くようにするには?

今開いているウィンドウがA、
今開いているウィンドウに貼られているリンクをB、
ポップアップで開きたいウィンドウをC、
とします。

Bをクリックすると、当然AのウィンドウにBが開きます。
そのクリックと同時にCも一緒に開きたいんです。
Cは小窓ではなくて親ウィンドウで、新しいウィンドウです。
どのようにすれば、実現できるのでしょうか?

表現がちょっとわかりにくいかと思いますが、どなたかお分かりの方、回答よろしくお願いします。

Aベストアンサー

> Bをクリックすると、当然AのウィンドウにBが開きます。
> そのクリックと同時にCも一緒に開きたいんです。
> Cは小窓ではなくて親ウィンドウで、新しいウィンドウです。
▲となると、Bをクリックしたときに開くページにポップアップを埋め込むことになりますが、ポップアップにするとブロックされる場合もありますよね。
それをご承知の上であれば、下記サイトで質問されるのがよろしいかと思います。

参考URL:http://www2.moug.net/bbs/web/

Qポップアップメニューでテーブル背景色変更

http://www.west-mira.jp/javascript/html/4/10/lib_color/bgcolor8/
上記URLで配布されているスクリプトで
選択したカラーを【背景】ではなく【テーブル】に反映させたいのですが
具体的な記述方法が解りません。
どなたか改造をお願い出来ないでしょうか?(※改造OKのスクリプトです)

上記スクリプトを使いたい理由は
・ポップアップメニューの各項目に背景色が表示される
・ポップアップメニューで背景色を選択出来る
の2点です。
なので、もし他に、この2点+【テーブルに反映】されるスクリプトが
ありましたら教えて下さい。

どうか宜しくお願い致します。

Aベストアンサー

idは基本的に個別のものでなければならないので、重複して同じidを設けるのは不可です。
かわりにclassを利用して、class="t1"と指定することにしましょう。
(class="t1"でないものの背景色がかわりません)

オプションをセットする部分をオリジナルからまったく変えてしまいましたが…
<html>
<head>
<script language="JavaScript">
<!--
window.onload = function(){
var col, colN, count, i, elm;
col = 'white,gray,black,silver,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,teal,aqua'.split(',');
colN = '白色,灰色,黒色,銀色,茶色,赤色,紫色,ピンク,緑色,ライム,オリーブ,黄色,紺色,青色,青緑,水色'.split(',');

elm = document.getElementById('sel1');
count = col.length>colN.length?colN.length:col.length;
for (i=0; i<count; i++) {
elm.options[i] = new Option(colN[i],col[i]);
elm.options[i].style.backgroundColor = col[i];
}
}
function BgChange(e) {
var col = e.options[e.selectedIndex].value;
var tbl = document.getElementsByTagName('TABLE');
for (var i=0; i<tbl.length; i++){
if (tbl[i].className=='t1') tbl[i].style.backgroundColor=col;
}
}
//-->
</script>
</head>

<body>
<select name="sele1" id="sel1" onChange="BgChange(this);">
</select>
<p>
<table width="200" border="1" cellspacing="0" cellpadding="0" height="100" class="t1">
<tr>
<td align="center" width="100">no.1</td>
<td align="center" width="100"> </td>
</tr>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0" height="100">
<tr>
<td align="center" width="100">no.2</td>
<td align="center" width="100"> </td>
</tr>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0" height="100" class="t1">
<tr>
<td align="center" width="100">no.3</td>
<td align="center" width="100"> </td>
</tr>
</table>
</body>
</html>

idは基本的に個別のものでなければならないので、重複して同じidを設けるのは不可です。
かわりにclassを利用して、class="t1"と指定することにしましょう。
(class="t1"でないものの背景色がかわりません)

オプションをセットする部分をオリジナルからまったく変えてしまいましたが…
<html>
<head>
<script language="JavaScript">
<!--
window.onload = function(){
var col, colN, count, i, elm;
col = 'white,gray,black,silver,maroon,red,purple,fuchsia,green,lime,olive,yellow,navy,blue,...続きを読む

Qクリックでテーブル内の背景色だけを変更したいです。

教えてください。

ページ全体の背景色を変更するのは、
↓でできたのですが、

<form>
<input type="button" value="White" onClick="document.bgColor='white'">
<input type="button" value="Gray" onClick="document.main='gray'">
<input type="button" value="Blue" onClick="document.bgColor='blue'">
</form>

ページ内の一部のテーブルのみの背景色を
変更したい場合はどうように変更すればいいのでしょうか?

教えてください!

Aベストアンサー

特定の設定を使いまわすなら、cssでclassを
いじる方法もあります。

<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<input type="button" value="White" onClick="document.body.className='white'">
<input type="button" value="Gray" onClick="document.body.className='gray'">
<input type="button" value="Blue" onClick="document.body.className='blue'"><br>
テーブル1:
<input type="button" value="White" onClick="document.getElementById('t1').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br>
テーブル2:
<input type="button" value="White" onClick="document.getElementById('t2').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br>
</form>

<table width=100% id="t1">
<tr><td>test</td></tr>
</table>
<table width=100% id="t2">
<tr><td>test</td></tr>
</table>
</body>

特定の設定を使いまわすなら、cssでclassを
いじる方法もあります。

<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<input type="button" value="White" onClick="document.body.className='white'">
<input type="button" value="Gray" onClick="document.body.className='gray'">
<input type="button" value="Blue" onClick="doc...続きを読む

Qクリックするとそのセル一行(列ではない)の背景色が変わる。

タイトルに書いたJavaScriptを探しているのですが見つけることができません。
今から学ぼうにも時間的な都合で間に合わないので、皆さんのお力を貸していただければ、と思っています。
なお、
・違う行のセルをクリックするとそこの色が変わり、前回クリックしたところは元の色に戻る
という機能も欲しいと思っています。
どうかよろしくお願いします。

Aベストアンサー

> ピンクだった背景色が青になったりしています

書いてもらったtableには背景(ピンク?青??)の指定がなかったけど、セル毎に背景色を指定しているのでしょうか?
<td bgcolor="#xxxxxx"> みたいに。

だとしたらヘッダ部の<script ~></script>を次のものと差し替えて試してみてください。
#これでダメならtable全体をみてみないとわからないかも。

なお、テーブルのネストは問題ないはずです。

<script type="text/javascript">
<!--
function TT_color_set(oR,SetColor){
for(var i=0;i<oR.cells.length;i++) {
oR.cells[i].style.backgroundColor = SetColor;
}
}
function TT_click(oR) {
var oT = oR.parentNode.parentNode;
if(oT.targetRec == oR) {
TT_color_set(oR,'')
oT.targetRec = false;
} else {
if(oT.targetRec)TT_color_set(oT.targetRec,'');
TT_color_set(oR,oT.currentBackgroundColor);
oT.targetRec = oR;
}
}
function TT(Tid,SetColor) {
var oT = document.getElementById(Tid);
if(! oT)return;

for(var i=0;i<oT.rows.length;i++) {
oT.rows[i].onclick=function(){TT_click(this);};
}
oT.targetRec=false;
oT.currentBackgroundColor=SetColor;
}
//-->
</script>

> ピンクだった背景色が青になったりしています

書いてもらったtableには背景(ピンク?青??)の指定がなかったけど、セル毎に背景色を指定しているのでしょうか?
<td bgcolor="#xxxxxx"> みたいに。

だとしたらヘッダ部の<script ~></script>を次のものと差し替えて試してみてください。
#これでダメならtable全体をみてみないとわからないかも。

なお、テーブルのネストは問題ないはずです。

<script type="text/javascript">
<!--
function TT_color_set(oR,SetColor){
for(var i=0;i<oR....続きを読む


人気Q&Aランキング

おすすめ情報