phpMyAdminのようなテーブルでセルの色を変えたりしたい

2023/08/02 14:16

このQ&Aのポイント

phpMyAdminのようなテーブルで、特定のセルにカーソルが乗ると背景色が変わる仕組みを実装したいです。
また、セルをクリックするとチェックボックスが選択され、セルの背景色が固定されるようにしたいです。
具体的には、4つのセルを持つテーブルで、左側の2つのセルと右側の2つのセルにカーソルが乗ると、それぞれ異なる色に変わります。また、セルをクリックするとチェックボックスが選択され、セルの背景色がオレンジ色に固定されます。

ベストアンサー

phpMyAdminみたいに、テーブルのセルの色を変えたりしたい

2005/10/23 15:39

お世話になります。 phpMyAdminのテーブルみたいに、セルの一部にカーソルが乗ると背景色を緑色に変更し、離れると元の色に戻り、セルの一部でクリックすると、特定のチェックボックスにチェックが入り、かつ背景色をオレンジ色に固定するやり方を探しています。（チェックが入ると、マウスが乗っても、離れても、チェックがはずれるまではオレンジ色のまま） phpMyAdminは一行全てが色が変わりますが、現在考えているのは、 <form id="form" action="hoge.php" method="post" name="form"> <table width="500" border="1" cellspacing="2" cellpadding="0"> <tr> <td bgcolor="#dee3e7"><input type="checkbox" name="del_1" value="1" />削除１</td> <td bgcolor="#dee3e7">ファイル１</td> <td bgcolor="#dee3e7"><input type="checkbox" name="del_2" value="1" />削除２</td> <td bgcolor="#dee3e7">ファイル２</td> </tr> </table> </form> のように、一行にセルが４つあります。左二つのどちらかにマウスが乗ると左二つの色を変え、クリックすると、左側のチェックボックスにチェックが入り、色を固定する。同様に右側２つのセルにカーソルが乗れば色を変え、離れれば元の色に戻る。表の一部をクリックするとチェックボックスにチェックが入り、色が固定される・・・このようなページを作りたいので、是非、お力をかして頂けないでしょうか。よろしくお願い致します。

tomofriend
お礼率82% (48/58)

JavaScript
回答数3
ありがとう数4

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

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

ベストアンサー

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/10/23 20:41 回答No.1

ＩＥだとうまくいくが、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">  </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>

質問者

お礼 2005/10/23 21:02

回答して頂きまして本当にありがとうございます。参考にしてがんばります！できれば、ファイル１のセルにマウスが乗ると、チェックボックス(del_1)のセルもグリーンにしたいのと、ファイル１のセルをクリックすれば、チェックボックス(del_1)がチェックされるようにしたいのです。ひとつのセルを指定するのであれば、this でできますが、その指定する隣のセルも同じようにできないでしょうか。もし、なにかヒントがあればよろしくお願いします。ありがとうございました。

その他の回答 (2)

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/10/23 23:43 回答No.3

>今回の目的とは異なります。う～ん、例えば、ファイルＡのペアのＴＤには id="A1",id="A2"みたいにＩＤを振れば、今選ばれたセルから他方のセルを限定することは簡単です。後は、同じようにセル毎の処理をすればいいです。

質問者

お礼 2005/10/24 01:02

ありがとうございました！ idを作ってそれを指定すればよかったんですね。あと、関数の引数の項目をもう一つ増やしたらできました＾＾本当にありがとうございました！

BLUEPIXY
ベストアンサー率50% (3003/5914)

2005/10/23 22:12 回答No.2

#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">  </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>

質問者

お礼 2005/10/23 22:28

BLUEPIXY様、いつも本当に感謝しています。ＴＲでやると、確かに便利ですが、今回の目的とは異なります。＋－－－－＋－－－－－＋－－－－＋－－－－－＋｜□削除Ａ｜ファイルＡ｜□削除Ｂ｜ファイルＢ｜＋－－－－＋－－－－－＋－－－－＋－－－－－＋｜□削除Ｄ｜ファイルＤ｜□削除Ｅ｜ファイルＥ｜＋－－－－＋－－－－－＋－－－－＋－－－－－＋｜□削除Ｈ｜ファイルＨ｜□削除Ｉ｜ファイルＩ｜＋－－－－＋－－－－－＋－－－－＋－－－－－＋（本当は３行６列の表でやっています）のように、同じ行にペアＡとペアＢがあって、（□削除Ａ）と（ファイルＡ）のセルのどちらかにカーソルがあれば、このふたつのセルだけ背景色を変更し、どちらかのセルをクリックすれば、チェックボックスにチェックを入れ、背景色を固定したいのです。

関連するQ&A

チェックした行の色を変える
簡単にできそうかなと思ってやってみたら、泥沼状態。チェックボックスにチェック入れたときにその行をハイライトさせ、チェックはずすと元に戻るようにしたいのですが。【チェック入れた時の状態】 <TABLE BORDER="1"> <TR> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox"></TD> <TD></TD> </TR> <TR BGCOLOR="red"> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox" CHECKED></TD> <TD></TD> </TR> <TR> <TD><INPUT TYPE="CHECKBOX" NAME="CheckBox" VALUE="CheckBox"></TD> <TD></TD> </TR> </TABLE>
- ベストアンサー
- JavaScript
tableセルに色を付ける
　tableセルに色を付けます。　で、行で指定しようとtrタグにbgcolorをいれました。　ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。　セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？　コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。　スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> 　<td>あ</td> </tr> <tr> 　<td>い</td> </tr> <tr bgcolor="red"> 　<td>２</td> 　<td>う</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
テーブル内のチェックボックスを、全て選択、全て解除　したい
以下のような、フォームの中にあるテーブル内のチェックボックスを一括して選択、解除したいのですが、どのように書けば良いのかが分かりません。 <form name="form1"> <table> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="1">項目(1)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="2">項目(2)</td> </tr> <tr> <td><input name="array[]" type="checkbox" id="array[]" value="3">項目(3)</td> </tr> </table> </form> ↓これは自分で試したプログラムですが、うまく動きませんでした。 <SCRIPT TYPE="text/javascript">  </SCRIPT> <INPUT TYPE="button" onClick="BoxChecked(true);" VALUE="全て選択"> <INPUT TYPE="button" onClick="BoxChecked(false);" VALUE="全て未選択"> ↓ここに載っているのを色々変更してみたのですが上手くいきませんでした。 http://www5e.biglobe.ne.jp/~access_r/hp/javascript/js_072.html よろしくお願いします。
- ベストアンサー
- JavaScript
dwCSで、テーブル内のセルに対するペースト
質門させて頂きます。宜しくお願い致します。 adobe dreamweaverCS5.5でのテーブルにセルに対してペーストをする時のことです。 ▼対象ソース部分▼ <table width="911" border="0" cellspacing="1" cellpadding="2"> <tr> <td bgcolor="#E6FAFF" class="text3">ドラえもん<br></td> <td bgcolor="#E6FAFF" class="text3">のび太</td> <td bgcolor="#E6FAFF" class="text3">しずかちゃん</td> </tr> </table> 上記のようなテーブルがあって、セルに入っている「ドラえもん」「のび太」「しずかちゃん」というそれぞれの文字列を「キテレツ」「コロ助」「みよちゃん」に変更したいと思います。そこでExcelなどで、3つ横にならんだセル、例えば「キテレツ」「コロ助」「みよちゃん」といった値の入ったセルをそれぞれ複数選択して、コピーし、dreamweaverのデザインビューで、上記テーブル、セルを選択してペーストすると以下のようになってしまいます。 ▼現状の結果▼ <table width="911" border="0" cellspacing="1" cellpadding="2"> <tr> <td>キテレツ</td> <td>コロ助</td> <td>みよちゃん</td> </tr> </table> これを、以下のように、値だけをペーストしたいのですが、何か良い方法がございますか？ ▼理想の結果▼ <table width="911" border="0" cellspacing="1" cellpadding="2"> <tr> <td bgcolor="#E6FAFF" class="text3">キテレツ</td> <td bgcolor="#E6FAFF" class="text3">コロ助</td> <td bgcolor="#E6FAFF" class="text3">みよちゃん</td> </tr> </table> 要はテーブルのセルに設定した、スタイルを維持した状態で値のみをペーストしたいのです。お詳しい方いらっしゃいましたら、ご教示のほど何卒宜しくお願い申し上げます。
- ベストアンサー
- ホームページ作成ソフト
cgi-perlでテーブルのセルに色を付ける場合
cgi-perlでテーブルのセルに色を付ける場合 print "<td bgcolor="#ffffe8">"; とすると#以降はコメントアウトされてしまいますがこの場合どのように対処すればいいのでしょうか？
- ベストアンサー
- CGI
行クリックでチェックボックスをOn/Off、行全体を着色などさせたい
以下のように、１行に１チェックボックスがあります。　(1) 各行のどこかをクリックするたびにチェックボックスのON/OFFを切り替え　(2) チェックボックスがONである間は、行全体の背景を黄色に塗りつぶす　　　　（チェックが解除されたら黄色着色も解除）といった動作をさせたいのですが、記述方法をご教示いただけますと幸いです。 <table> 　<tr> 　　　<td>1</td> 　　　<td>東京</td> 　　　<td><input type="checkbox" name="myvalue" value="1"></td> 　</tr> 　<tr> 　　　<td>2</td> 　　　<td>神奈川</td> 　　　<td><input type="checkbox" name="myvalue" value="2"></td> 　</tr> 　<tr> 　　　<td>3</td> 　　　<td>千葉</td> 　　　<td><input type="checkbox" name="myvalue" value="3"></td> 　</tr> </table>
- ベストアンサー
- JavaScript
クリック後、TABLEの幾つかのセルの色を変える
初めて質問させて頂きます。現在ホームページを作成しています。フレームでページを2分割して、片方がメニューバーのようなページでもう一つがメインページのような構成です。こんな感じです。 <FRAMESET rows="20%,80%"> <FRAME name="top" src="menu.htm"> <FRAME name="bottom" src="top.htm"> <NOFRAMES> <BODY> <P>Please access this page by browser that supports the frame. </P> </BODY> </NOFRAMES> </FRAMESET> そしてmenu.htmにテーブでコンテンツを表示し、もう片方にTOP、PROFILE、BBS、DIARYとテーブルで仕切ってページを作成しています。 <TABLE border="1" bgcolor="gray"> <TBODY> <TR> <TD bgcolor="red"><A href="top.htm" target="bottom">TOP</A></TD> <TD><A href="profile.htm" target="bottom">PROFILE</A></TD> <TD><A href="bbs.htm" target="bottom">BBS</A></TD> <TD><A href="diary.htm" target="bottom">DIARY</A></TD> </TR> </TBODY> </TABLE> このとき、最初は"TOP"のセルがが赤くなっています。ここでリンクとなっている"BBS"をクリックすると、そのセルの背景がredになり、その他のセルの背景はgrayのままで、次にDIARYをクリックするとDIARYのセルの背景がredになり、BBSはgrayになるというような事をやりたいのですが、良い方法はあるでしょうか？ちなみにサーバの容量が非常に少ないので画像を使いたくないのですが、画像を使わざるを得ないでしょうか？このカテゴリーで質問する内容では無いかもしれませんが、どなたか良いアドバイスを宜しくお願いします。
- ベストアンサー
- HTML
色の調合について
自作の家具を木で作りました。水性ペンキを塗って仕上げたのですが、ここで難関にぶつかっています。ソファーの色が、「ベージュ」でして、一応、ほぼ近い色として"#e8d786"の色です。 *お手間で恐縮ですが、以下の一行をテキストにコピーし、"適当な名前.html"で保存して、ブラウザでひらいていただくと色が見れます。（ <>も含めてコピーしてください。） <body bgcolor="#e8d786"> で、上記の色が出したいのですが、「薄茶」とゆうペンキに、「黄色」少しと「白」たくさんを混ぜて試してみましたが、「肌色」っぽくなってしまい、ピンクに近い方向性になってしまいました。 "#fadebc"のような色です。ピンク系に感じるのがお分かりいただけると思います。。。。このようになってしまった状態で、さらに何色を混ぜていけば近い色になるでしょうか？以下をそのまま全部、コピぺして(拡張子.htmlで)保存いただけると、出したい色と現在の色が同時に確認出来ます。 <body bgcolor="#FFFFFF"> <TABLE COL="2" ROW="2" BORDER="0" CELLSPACING="5" CELLPADDING="5"> <TR> <TD BGCOLOR="#e8d786" HEIGHT=50 width=300><BR></TD><TD>出したい色</TD> </TR> <TR> <TD BGCOLOR="#fadebc" HEIGHT=50 width=300><BR></TD><TD>現在の色</TD> </TR> </TABLE>
- ベストアンサー
- 絵画・イラスト・デザイン
phpでチェック状態を保存するには
PHP勉強中の初心者です。 phpじゃなくてもいいのですが、チェックボックスのチェック状態を保存する方法を探しています。簡単なphpサイトを作ったのですが、その中で進捗状況に応じて項目にチェックを入れたいと思っています。（チェックを外す事もあります。）例えば <table> <tr> <td><input type="checkbox" name="groupA" value=""></td> <td>りんごを買う</td> </tr> <tr> <td><input type="checkbox" name="groupA" value=""></td> <td>りんごを食べる</td> </tr> <tr> <td><input type="checkbox" name="groupB" value=""></td> <td>みかんを買う</td> </tr> <tr> <td><input type="checkbox" name="groupB" value=""></td> <td>みかんを食べる</td> </tr> </table> みたいな簡単な表です。自分で使うだけなので、チェック状態をクッキーに保存してもいいのかもしれませんが、パソコンで見たりiphoneで見たりしたいので、クッキー以外で状態を保存したいです。そして、これはできれば…でいいのですが、画面変遷はせずにチェック状態が保存できれば嬉しいです。イメージは、ブログなどのいいねボタンや拍手ボタンなどのクリックした状態がその場で保存されるような感じです。単純に表示で状態が確認できればいいので、チェックボックスじゃなくても構いません。（項目をクリックすると色が変わるなど）一応phpmyadminが使える環境にはあります。具体的な回答をもらうには情報が少ないかもしれませんので、例えば・javascript+●●で～したらできる・このサイトを見ると参考になる等のアドバイスでもありがたいです。ご指導の程、何卒よろしくお願い致します。
- ベストアンサー
- PHP
テーブル行のクリックでチェックボックスの制御
テーブル行をクリックしたときにその行にあるチェックボックスのON/OFFを制御したいと思います。 Jqueryで以下サンプルを作成してみました。該当行をクリックするとチェックボックスが ONになったりOFFになったりするのですがチェックボックス自体をクリックするとうまくチェックがONになりません。恐らくチェックボックスをクリックした時はONになっていて、同時に行をクリックしたとみなされONになっているチェックボックスをOFFにしているのではないかと思われます。チェックボックスをクリックしてもON/OFFがうまくいくようにするためにはどうすればよろしいでしょうか【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("#nameTable tr").click(function() { //alert($(data).find(":checkbox").val()); var chk = $(this).find(":checkbox"); if(chk.prop("checked")) { chk.attr("checked", false); } else { chk.attr("checked", true); } }); }); </script> <title>CSS</title> <style type="text/css"> </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <table id="nameTable" border="1"> <tr><th>名前</th><th>チェックボックス</th></tr> <tr><td>あいうえお</td><td><input type="checkbox" value="1"></td></tr> <tr><td>かきくけこ</td><td><input type="checkbox" value="2"></td></tr> <tr><td>さしすせそ</td><td><input type="checkbox" value="3"></td></tr> <tr><td>たちつてと</td><td><input type="checkbox" value="4"></td></tr> <tr><td>なにぬねの</td><td><input type="checkbox" value="5"></td></tr> </table> </body> </html>
- 締切済み
- JavaScript

phpMyAdminのようなテーブルでセルの色を変えたりしたい

phpMyAdminみたいに、テーブルのセルの色を変えたりしたい