
テーブルにて、onMouseOverで背景色を変え、
onMouseOut にて背景色を戻すスクリプトを作っています。
セル一つならば変更できますが、複数のセルに依存関係があり、依存関係があるセル同士はそのセルにマウスオーバーされると依存関係があるセル全ての色を変更したいと思っています。
いろいろと探しているのですが、見つかりません。
以下のようなサンプルで 1 と 4 が一緒に変更できないものでしょうか。
よろしくお願いします。
<html>
<head>
<title>テーブルの色を変える</title>
<script language="JavaScript">
<!--
// b_color(idname,cn);
// 背景色を変える
// idname: 色変更したいタグid;
// cn:色変更法
function b_color(idname,cn)
{
// alert(idname); // debug alert
if (document.getElementById)
{
document.getElementById(idname).style.backgroundColor = cn;
}else{
// alert("あなたのブラウザには対応しておりません。");
}
}
if (! document.getElementById)
{
document.write("あなたのブラウザには対応しておりません。マウスを動かしても色は変えられません。<br>");
// マウス移動でいちいちalertが出ると煩わしいので、最初に表示しておく
}
//-->
</script>
</head>
<body>
<table border="1">
<tr>
<td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ1</td>
<td>ここ2</td>
</tr>
<tr>
<td>ここ3</td>
<td id="11" bgcolor="#cccccc" onMouseOver="b_color('11','#ff0000');" onMouseOut="b_color('11','#0000ff');">ここ4</td>
</tr>
</table>
</body>
</html>
No.1ベストアンサー
- 回答日時:
function b_color(idname,cn)
{
if (document.getElementById)
{
for ( i=0 ; i < document.all.item(idname).length ; i++ ) {
document.all.item(idname, i).style.backgroundColor = cn;
}
} else {
}
}
こんな感じでいいんじゃないですか?
idがページ上に複数あるときは参照方法が(id,n)となります。
参考URL:http://tohoho.wakusei.ne.jp/js/element.htm#Element
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- HTML・CSS HTMLソースの質問 3 2022/07/28 13:29
- Visual Basic(VBA) エクセルVBA ダブルクリックしたら色反転を指定したセルのみにしたい 2 2022/04/06 12:52
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<td>の中を移動する、外部J...
-
DIVで同一ページ内にポップアッ...
-
テーブルの背景色を複数変更する
-
CSVファイルから画像名を取得し...
-
テーブルの外にマウスを出した...
-
連動テーブルのクロスハイライト
-
JavaScriptでイメージを自動的...
-
csvファイルのデータを変数とし...
-
javascript でテーブル操作
-
【jQuery】tableループ内のIDの...
-
マウスオンで指定の位置で画像...
-
javascriptでクリックするごと...
-
新しくフォルダを作成したい
-
テキストだけonCllickを検知したい
-
CSVファイルを読みこみ、プルダ...
-
IEではうまく行くのですが他の...
-
Array.sortメソッドのデフォル...
-
return trueとreturn falseの用...
-
Java scriptのonchangeについて 続
-
onclickで画像と文字を別々の場...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
プルダウンメニューを表の中に...
-
【jQuery】tableループ内のIDの...
-
テーブルの行数を可変長にした...
-
tbody要素のinnerHTMLが書き換...
-
クリックごとに文字色が交互に...
-
javascriptでクリックするごと...
-
javascriptで<table>背景色の取得
-
javascriptで画像をテーブルに...
-
下記のようなメニューを作成し...
-
テキストエリアに入力した改行...
-
csvファイルのデータを変数とし...
-
Table内TDの子要素を移動させた...
-
カレンダーに印を付けたい
-
javascriptで表に画像を貼る
-
onMouseでbackgroundの画像を変...
-
<td>の中を移動する、外部J...
-
table内で上下するfloating men...
おすすめ情報