差分

このページの2つのバージョン間の差分を表示します。

--- study:javascript:event [2008/02/02 11:36] – banana
+++ study:javascript:event [2008/03/20 01:51] (現在) – banana
@@ 行 2: / 行 2: @@
 document.compatMode
-  - Quirks mode("BackCompat") : Standard-compliant mode is not switched on.
+  - Quirks mode[BACKCompat] : Standard-compliant mode is not switched on.
-  - Strict mode("CSS1Compat") : Standard-compliant mode is switched on.
+  - Strict mode[CSS1Compat] : Standard-compliant mode is switched on.
-<code>
+<code javascript>
 function getPosition(e) {
     e = e || window.event;
@@ 行 27: / 行 27: @@
 </code>
+{{keywords> mouse cursor position change background color selected row}}
@@ 行 51: / 行 51: @@
 </html>
+====== Change background color of a selected row ======
+<code javascript>
+function TT_click(oR) {
+ var oT = oR.parentNode.parentNode;　//Table node
+ if(oT.targetRec == oR) {   //再度クリックすると色を消す
+  oR.style.backgroundColor = '';
+  oT.targetRec = false;
+ } else {
+  if(oT.targetRec)oT.targetRec.style.backgroundColor = '';
+  oR.style.backgroundColor = oT.currentBackgroundColor;
+  oT.targetRec = oR;
+ }
+}
+function TT(Tid,SetColor) {
+ var oT = document.getElementById(Tid);
+ if(! oT)return;
+ for(var i=0;i<oT.rows.length;i++) {
+  oT.rows[i].onclick=function(){TT_click(this);};
+ }
+  oT.targetRec=false;
+  oT.currentBackgroundColor=SetColor;
+}
+</code>
+===== Code sample =====
+<code html>
+<BODY bgcolor="#f9c58a">
+<form name="f1">
+＜テーブルをクリックすると行の色が変わるサンプル＞
+<TABLE id="T1" cellspacing="0" width="180">
+<tr><td>hoge</td><td>hoge</td></tr>
+<tr><td>hoge</td><td>hoge</td></tr>
+<tr><td>hoge</td><td>hoge</td></tr>
+</TABLE>
+<BR><BR>
+<script type="text/javascript">
+<!--
+TT('T1','#65c9ef');// テーブルのIDをクリックした時の色
+//-->
+</script>
+</code>