JavaScript

TRにonClickアクションを組込む2

  onclick したセルの色を変える処理に
  onmousover と onmouseout を組み合わせる。
  onmouseout しても click したセルのみ色を戻さない処理を追加する。
サンプルコード
<SCRIPT Language="JavaScript">
<!--
	var gActiveobj;	// クリックで色を変更中のObjectを保持

	// onmouseover 時の処理
	function mouseOverTR( obj ) {
		for (var i=0;i<obj.cells.length;i++ ) {
		obj.cells[i].style.backgroundColor = "#FFFF55";
		}
	}

	// onmouseout 時の処理
	function mouseOutTR( obj ) {
		// クリックで色を変更中のセルの場合はmouseoutでも色を戻さない
		if (obj!=gActiveobj){
			for (var i=0;i<obj.cells.length;i++ ) {
				obj.cells[i].style.backgroundColor = "";
			}
		}
	}

	// onClick 時の処理 //
	function mClickTR(obj) {
		// 他のセルをクリックした場合 前に変更したセルの色を戻す
		if (gActiveobj){
			for(var i=0;i<gActiveobj.cells.length;i++ ){
				gActiveobj.cells[i].style.backgroundColor = "";
			}
		}

		// 他のセルをクリックした場合に色を戻す為Objectを保持する
		gActiveobj = obj;

		// クリックしたセルの色を変更する
		for(var i=0;i<obj.cells.length;i++){
			obj.cells[i].style.backgroundColor = "#FFFF55";
		}
	}
// -->
</SCRIPT>



<table>
 <tr onClick="mClickTR(this);" onmouseover="mouseOverTR(this);" onmouseout="mouseOutTR(this);">
 	<th width="300"> マウスclick&overで色が変わります </th>
 	<th width="300"> マウスclick&overで色が変わります </th>
 </tr>
 <tr onClick="mClickTR(this);" onmouseover="mouseOverTR(this);" onmouseout="mouseOutTR(this);">
 	<td> マウスclick&overで色が変わります </td>
 	<td> マウスclick&overで色が変わります </td>
 </tr>
 <tr onClick="mClickTR(this);" onmouseover="mouseOverTR(this);" onmouseout="mouseOutTR(this);">
 	<td> マウスclick&overで色が変わります </td>
 	<td> マウスclick&overで色が変わります </td>
 </tr>
 <tr onClick="mClickTR(this);" onmouseover="mouseOverTR(this);" onmouseout="mouseOutTR(this);">
 	<td> マウスclick&overで色が変わります </td>
 	<td> マウスclick&overで色が変わります </td>
 </tr>
</table>




マウスclick&overで色が変わります マウスclick&overで色が変わります
マウスclick&overで色が変わります マウスclick&overで色が変わります
マウスclick&overで色が変わります マウスclick&overで色が変わります
マウスclick&overで色が変わります マウスclick&overで色が変わります


      Document-Folder          一覧
HP-UX
HULFT
JAVA
JP1
JavaScript
Linux
MAC
PHP
Perl
Python
Ruby
SOA
Solaris
Unix全般
Windows
XML
エクセル
スタイルシート
セキュリティー
データベース
ネットワーク
パソコン
ブラウザ
プログラム構文
仮想化
          RSS-Folder
ニュース
   アットマーク・アイティ(@IT)
   シンクイット(ThinkIT)
   インターネットコム
   インターネットウォッチ
   日経IT-Pro
   日経パソコン
   CNET Japan
   ZD-NetJapan
   MYCOM
   RBB-Today
ベンダー
   日本IBM
   日本HP
   サンマイクロシステムズ
   NEC
   富士通
   日立
ソフトウェア
   マイクロソフト
   トレンドマイクロ
   オラクル
   サイボウズ
   Mozilla
   野村総合研究所
   (その他ソフトウェア企業)
更新履歴 一覧
 07/08 PERF
プログラム構文
 07/07 PERF
プログラム構文
 06/25 オブジェクトプログラミング2
Perl>サンプル
 07/12 クローン作成
仮想化>vCenter
 07/12 vyatta設定
ネットワーク>vyatta
 07/12 vyattaインストール
ネットワーク>vyatta
 07/12 リポジトリサーバ
Linux>サーバ構築
 07/05 VMwareのインストール
仮想化>VMware
 07/05 PXEブート
仮想化>KVM
 07/01 DHCPでのPXEブート
仮想化>KVM
 06/27 qcow2仮想DISK作成
仮想化>KVM
 06/13 NWの設定
仮想化>VMwareEsxi
 06/13 IPアドレスの変更
仮想化>VMwareEsxi
 06/12 自動ssh
Unix全般>シェル>Bash
 06/12 diffプログラミング
Python
Google