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

2002/12/18 12:14

このQ&Aのポイント

クリックした行の背景色を変更し、ハイライトさせるスクリプトの追加動作方法について
表以外をクリックすると行の背景色を元に戻し、テキストボックスをクリアする方法について
クリックした行の背景色を変更するスクリプトの追加動作に関する問題への解決策を探しています

snowsaab
お礼率49% (71/144)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

madman
ベストアンサー率24% (612/2465)

2002/12/18 12:37 回答No.1

こんな感じで、グローバル変数にｆｌｇを追加（初期値０）。表クリック時にｆｌｇ＝１ 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>

質問者