アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：tomofriend
  • 質問日時：
  • 回答数：3件

お世話になります。

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>

のように、一行にセルが４つあります。
左二つのどちらかにマウスが乗ると左二つの色を変え、クリックすると、左側のチェックボックスにチェックが入り、色を固定する。
同様に右側２つのセルにカーソルが乗れば色を変え、離れれば元の色に戻る。表の一部をクリックするとチェックボックスにチェックが入り、色が固定される・・・


このようなページを作りたいので、是非、お力をかして頂けないでしょうか。よろしくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

ＩＥだとうまくいくが、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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答して頂きまして本当にありがとうございます。

参考にしてがんばります！

できれば、ファイル１のセルにマウスが乗ると、チェックボックス(del_1)のセルもグリーンにしたいのと、ファイル１のセルをクリックすれば、チェックボックス(del_1)がチェックされるようにしたいのです。

ひとつのセルを指定するのであれば、this でできますが、その指定する隣のセルも同じようにできないでしょうか。

もし、なにかヒントがあればよろしくお願いします。
ありがとうございました。

通報する
お礼日時：2005/10/23 21:02

No.3

  • 回答者： BLUEPIXY
  • 回答日時：

>今回の目的とは異なります。


う～ん、
例えば、
ファイルＡのペアのＴＤには
id="A1",id="A2"みたいにＩＤを振れば、今選ばれたセルから他方のセルを限定することは簡単です。
後は、同じようにセル毎の処理をすればいいです。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました！

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

本当にありがとうございました！

通報する
お礼日時：2005/10/24 01:02

No.2

  • 回答者： BLUEPIXY
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

BLUEPIXY様、いつも本当に感謝しています。

ＴＲでやると、確かに便利ですが、今回の目的とは異なります。

＋－－－－＋－－－－－＋－－－－＋－－－－－＋
｜□削除Ａ｜ファイルＡ｜□削除Ｂ｜ファイルＢ｜
＋－－－－＋－－－－－＋－－－－＋－－－－－＋
｜□削除Ｄ｜ファイルＤ｜□削除Ｅ｜ファイルＥ｜
＋－－－－＋－－－－－＋－－－－＋－－－－－＋
｜□削除Ｈ｜ファイルＨ｜□削除Ｉ｜ファイルＩ｜
＋－－－－＋－－－－－＋－－－－＋－－－－－＋

（本当は３行６列の表でやっています）

のように、同じ行にペアＡとペアＢがあって、
（□削除Ａ）と（ファイルＡ）のセルのどちらかに
カーソルがあれば、このふたつのセルだけ背景色を
変更し、どちらかのセルをクリックすれば、
チェックボックスにチェックを入れ、背景色を
固定したいのです。

通報する
お礼日時：2005/10/23 22:28

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報