- ベストアンサー
テーブルの選択とセルの色変更について
- テーブルの特定のセルにマウスを当てると、その行のセルの色を変える方法を知りたいです。
- さらに、セルの色を固定する方法と、選択された行番号を取得する方法も知りたいです。
- また、固定されたセルを元に戻す方法も教えてください。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
サンプルを書いてみました。参考にしてください。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> //表示するテーブルの行数 var row_num=3; //変更する色 var c_color="#00FFFF"; //色固定フラグ var flg_a = 0; //固定行判定フラグ var flg_b = 0; //背景色の固定 function color_change(num){ //色固定と解除の判定 if(flg_a==1 && flg_b==num){ del_color(); flg_a = 0; flg_b = 0; document.form_1.f_text.value=""; return(false); }else if(flg_a==0 && flg_b==0){ flg_b=num; flg_a=1; }else if(flg_a==1 && flg_b!=num){ return(false); } //背景色初期化関数 del_color(); //選択したテーブルの行をオブジェクト化 t_ob = document.getElementById("t"+num); //番号をFORMで表示 document.form_1.f_text.value=num; //選択した行の背景色を変更 window.t_ob.style.background=c_color; } //背景色を初期化 function del_color(){ //表示するテーブルの行数分ループ for(var i=1;i<=row_num;i++){ //テーブルの行をオブジェクト化 t_ob = document.getElementById("t"+i); //背景色を初期化 window.t_ob.style.background="transparent"; } } //マウスオーバー、アウト時の処理 function color_over(num,flg_c){ if(flg_a != 1){ //選択したテーブルの行をオブジェクト化 t_ob = document.getElementById("t"+num); if(flg_c == 1){ //マウスオーバー時の背景色を変更 window.t_ob.style.background=c_color; }else{ //マウスアウト時の背景色を初期化 window.t_ob.style.background="transparent"; } } } </SCRIPT> </HEAD> <BODY> <table border=1> <TR id="t1" onMouseOver="color_over(1,1)" onMouseOut="color_over(1,0)" onClick="color_change(1)"> <TD align="center">1</TD> <TD align="center">aaaaaa</TD> <TD align="center">bbbbbb</TD> </TR> <TR id="t2" onMouseOver="color_over(2,1)" onMouseOut="color_over(2,0)" onClick="color_change(2)"> <TD align="center">2</TD> <TD align="center">cccccc</TD> <TD align="center">dddddd</TD> </TR> <TR id="t3" onMouseOver="color_over(3,1)" onMouseOut="color_over(3,0)" onClick="color_change(3)"> <TD align="center">3</TD> <TD align="center">eeeeee</TD> <TD align="center">ffffff</TD> </TR> </table> <FORM name="form_1"> <INPUT type="text" name="f_text"> </FORM> </BODY> </HTML>
お礼
ご丁寧にサンプルまでつけていただき、ありがとうございましたｍ(＿＿)ｍ 私のしたかったものそのものズバリでした！！