- ベストアンサー
phpMyAdminのようなテーブルでセルの色を変えたりしたい
- phpMyAdminのようなテーブルで、特定のセルにカーソルが乗ると背景色が変わる仕組みを実装したいです。
- また、セルをクリックするとチェックボックスが選択され、セルの背景色が固定されるようにしたいです。
- 具体的には、4つのセルを持つテーブルで、左側の2つのセルと右側の2つのセルにカーソルが乗ると、それぞれ異なる色に変わります。また、セルをクリックするとチェックボックスが選択され、セルの背景色がオレンジ色に固定されます。
- tomofriend
- お礼率82% (48/58)
- JavaScript
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ＩＥだとうまくいくが、FireFoxだとちょっと動作が異なる(チェックボックス自体が機能しない、許されよ) -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Sample</title> <script type="text/javascript"> <!-- function mouseover(el){ el.style.backgroundColor="Green"; } function mouseout(el){ el.style.backgroundColor=""; } function mouseoverWithLock(el,f){ if(!f.checked) mouseover(el); } function mouseoutWithLock(el,f){ if(!f.checked) mouseout(el); } function changeLock(el,f){ if(f.checked){ el.style.backgroundColor=""; f.checked=false; } else { el.style.backgroundColor="Orange"; f.checked=true; } } //--> </script> </head> <body> <form id="form" action="hoge.php" method="post" name="form"> <table width="500" border="1" cellspacing="2" cellpadding="0"> <tr> <td bgcolor="#dee3e7" onmouseover="mouseoverWithLock(this, form.del_1)" onmouseout ="mouseoutWithLock(this, form.del_1)" onclick ="changeLock(this, form.del_1)"> <input type="checkbox" name="del_1" value="1" onclick="changeLock(this.parentElement,this)"/>削除１</td> <td bgcolor="#dee3e7" onmouseover="mouseover(this)" onmouseout="mouseout(this)">ファイル１</td> <td bgcolor="#dee3e7" onmouseover="mouseoverWithLock(this, form.del_2)" onmouseout ="mouseoutWithLock(this, form.del_2)" onclick ="changeLock(this, form.del_2)"> <input type="checkbox" name="del_2" value="1" onclick="changeLock(this.parentElement,this)" />削除２</td> <td bgcolor="#dee3e7" onmouseover="mouseover(this)" onmouseout="mouseout(this)">ファイル２</td> </tr> </table> </form> </body> </html>
その他の回答 (2)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>今回の目的とは異なります。 う～ん、 例えば、 ファイルＡのペアのＴＤには id="A1",id="A2"みたいにＩＤを振れば、今選ばれたセルから他方のセルを限定することは簡単です。 後は、同じようにセル毎の処理をすればいいです。
お礼
ありがとうございました！ idを作ってそれを指定すればよかったんですね。 あと、関数の引数の項目をもう一つ増やしたらできました＾＾ 本当にありがとうございました！
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>隣のセルも同じようにできないでしょうか。 説明から別々だと思っていました。 それぞれのセルを扱うこともできますが、面倒なので、 表の形は変わってしまいますが、ＴＲでまとめてやると簡単です。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Sample</title> <script type="text/javascript"> <!-- function mouseoverWithLock(el,f){ if(!f.checked) el.style.backgroundColor="Green"; } function mouseoutWithLock(el,f){ if(!f.checked) el.style.backgroundColor=""; } function changeLock(el,f){ //FireFoxではチェックボックス自体をクリックした時うまくない if(f.checked){ el.style.backgroundColor=""; f.checked=false; } else { el.style.backgroundColor="Orange"; f.checked=true; } } //--> </script> </head> <body> <form id="form" action="hoge.php" method="post" name="form"> <table width="500" border="1" cellspacing="2" cellpadding="0"> <tr bgcolor="#dee3e7" onmouseover="mouseoverWithLock(this, form.del_1)" onmouseout ="mouseoutWithLock(this, form.del_1)" onclick ="changeLock(this, form.del_1)"> <td> <input type="checkbox" name="del_1" value="1" onclick="changeLock(this.parentElement.parentElement,this)"/>削除１</td> <td>ファイル１</td> </tr> <tr bgcolor="#dee3e7" onmouseover="mouseoverWithLock(this, form.del_2)" onmouseout ="mouseoutWithLock(this, form.del_2)" onclick ="changeLock(this, form.del_2)"> <td> <input type="checkbox" name="del_2" value="1" onclick="changeLock(this.parentElement.parentElement,this)" />削除２</td> <td>ファイル２</td> </tr> </table> </form> </body> </html>
お礼
BLUEPIXY様、いつも本当に感謝しています。 ＴＲでやると、確かに便利ですが、今回の目的とは異なります。 ＋－－－－＋－－－－－＋－－－－＋－－－－－＋ ｜□削除Ａ｜ファイルＡ｜□削除Ｂ｜ファイルＢ｜ ＋－－－－＋－－－－－＋－－－－＋－－－－－＋ ｜□削除Ｄ｜ファイルＤ｜□削除Ｅ｜ファイルＥ｜ ＋－－－－＋－－－－－＋－－－－＋－－－－－＋ ｜□削除Ｈ｜ファイルＨ｜□削除Ｉ｜ファイルＩ｜ ＋－－－－＋－－－－－＋－－－－＋－－－－－＋ （本当は３行６列の表でやっています） のように、同じ行にペアＡとペアＢがあって、 （□削除Ａ）と（ファイルＡ）のセルのどちらかに カーソルがあれば、このふたつのセルだけ背景色を 変更し、どちらかのセルをクリックすれば、 チェックボックスにチェックを入れ、背景色を 固定したいのです。
お礼
回答して頂きまして本当にありがとうございます。 参考にしてがんばります！ できれば、ファイル１のセルにマウスが乗ると、チェックボックス(del_1)のセルもグリーンにしたいのと、ファイル１のセルをクリックすれば、チェックボックス(del_1)がチェックされるようにしたいのです。 ひとつのセルを指定するのであれば、this でできますが、その指定する隣のセルも同じようにできないでしょうか。 もし、なにかヒントがあればよろしくお願いします。 ありがとうございました。