人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTMLページのtableタグ中、td,/tdで作られたセルに対し、onMouseOver,onclickなどのイベントをJavascriptで取得したいです。カラーピッカーなどで使われているようですが、どうやってイベント取得するのかわかりません。教えてください。

●質問者: masashi0316
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript イベント カラー セル
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● llusall
●100ポイント

このような感じでTDタグにイベントを付けてはどうでしょうか?



<html>

<body>

<table border=1>

<tr>

<td id="a" onclick="clicked(this);" onmouseover="mover(this);" onmouseout="mout(this);">AAAA</td><td id="b" onclick="clicked(this);" onmouseover="mover(this);" onmouseout="mout(this);">BBBB</td>

</tr>

</table>

<input type="text" name="txt" >

</body>

</html>

<SCRIPT LANGUAGE="JavaScript">

<!--

function clicked(o){

alert("clicked! " + o.id);

}

function mover(o){

document.all.txt.value = "mouse over";

}

function mout(o){

document.all.txt.value = "mouse out";

}

//-->

</SCRIPT>

◎質問者からの返答

できました。なんか、難しく考えすぎてたみたいです。。ありがとうございました!!


2 ● llusall
●50ポイント

テーブルタグにイベントを設定する方法もありましたので紹介します。


<html>

    <style>

      td { text-align: center; }

    </style>

<script language="javascript">

function highlight(e,b) {

    var src;

    // Netscape イベント処理用の分岐

    if (navigator.appName == "Netscape"){

        src = e.target;

    }else{

        src = e.srcElement;

        if (src.tagName == "TD") {

            if(b==true) { // mouseOver, and highlight {

                src.originColor=src.style.backgroundColor;

                src.style.backgroundColor="yellow";

            }else{        // mouseOut, restore original color

                src.style.backgroundColor=src.originColor;

            }

        }

    }

}

</script>

<body>

   <table id="table1" width="20%" border="1"

      onmouseover="highlight(event,true)"

      onmouseout="highlight(event,false)">

      <tr><th>Simple Table</th></tr>

      <tr><td>Cell 1</td></tr>

      <tr><td>Cell 2</td></tr>

      <tr><td>Cell 3</td></tr>

      <tr><td>Cell 4</td></tr>

</table>

</body>

</html>




ここにサンプルがありました。(こちらスクリプトエラーになるので改修しました)

http://www.microsoft.com/japan/msdn/asp.net/using/migrating/jspm...

◎質問者からの返答

ありがとうございます、参考になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ