クリックした行の背景色の変更

解決済

質問者：snowsaab
質問日時：2002/12/18 12:14
回答数：1件

以下のスクリプトは
【クリックした行の背景色を変更し、ハイライトさせる】
ものです。
このスクリプトに追加したい動作があるのですが、なかなかよい方法が思いつきません。

<追加項目>
・表以外でクリックすると行の背景色をやめる。
　それと同時にテキストボックスもクリアする。

何かよい方法はないでしょうか？

<html>
<head>

<script>

var preEl ;
var orgBColor;
var orgTColor;
function HighLightTR(backColor,textColor,name,ken){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
var el = event.srcElement;
el = el.parentElement;
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;

try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;

document.form1.test1.value=name;
document.form1.test2.value=ken;

}
function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++){
a_obj.cells(i).style.color=a_color;
}

}

</script>

</head>
<body>

<table border=1 align=center>

<th>氏名</th>
<th>住所</th>

<tr onClick="HighLightTR('yellow','blue','山田太郎','東京都');" >
<td align=right>山田太郎</td>
<td align=right>東京都</td>
</tr>
<tr onClick="HighLightTR('yellow','blue','山本浩二','埼玉県');" >
<td align=right>山本浩二</td>
<td align=right>埼玉県</td>
</tr>
</table>

<form name="form1" method="post" action="">
<input type="text" name="test1">
<input type="text" name="test2">
</form>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： madman
回答日時：2002/12/18 12:37

こんな感じで、グローバル変数にｆｌｇを追加（初期値０）。

表クリック時にｆｌｇ＝１
bodyのonclickも同時有効になるので、xx()内でｆｌｇ＝２
次にボディクリック時に消してｆｌｇ＝０
色は自分で消してね。

だけどこの記述だと、表が増えた時きつくないですか？
JavaScript側で、配列もって表の中身をonload時に作成し、
クリックされた場所を、保持しておいて、その場所だけ色変え、色戻し、にしたほうが良いのでは？
----

<html>
<head>

<script>

var preEl ;
var orgBColor;
var orgTColor;
var flg=0;
function HighLightTR(backColor,textColor,name,ken){
if(typeof(preEl)!='undefined') {
preEl.bgColor=orgBColor;
try{ChangeTextColor(preEl,orgTColor);}catch(e){;}
}
var el = event.srcElement;
el = el.parentElement;
orgBColor = el.bgColor;
orgTColor = el.style.color;
el.bgColor=backColor;

try{ChangeTextColor(el,textColor);}catch(e){;}
preEl = el;

document.form1.test1.value=name;
document.form1.test2.value=ken;
flg = 1;

}
function ChangeTextColor(a_obj,a_color){ ;
for (i=0;i<a_obj.cells.length;i++){
a_obj.cells(i).style.color=a_color;
}

}
function xxx()
{
if (flg == 2) {
document.form1.test1.value="";
document.form1.test2.value="";
flg=0;
}
else
{
flg=2;
}
}
</script>

</head>
<body onClick="xxx()">

<table border=1 align=center>

<th>氏名</th>
<th>住所</th>

<tr onClick="HighLightTR('yellow','blue','山田太郎','東京都');" >
<td align=right>山田太郎</td>
<td align=right>東京都</td>
</tr>
<tr onClick="HighLightTR('yellow','blue','山本浩二','埼玉県');" >
<td align=right>山本浩二</td>
<td align=right>埼玉県</td>
</tr>
</table>

<form name="form1" method="post" action="">
<input type="text" name="test1">
<input type="text" name="test2">
</form>

</body>
</html>