- ベストアンサー
Javascript クリックした場所のみセルの色を変えたい
HTML・JSともに初心者です。 よろしくお願いします。 現在テーブルの作成を行っており、 リンクをクリックしたセルのみ色を変更するという物を作りたいのですが、うまくいきませんorz ※現在は文字の色が変わっているとおもいます・・・ 現在下記のように作成しましたが困っております。 どのように直せばよいかご教授願います。 --- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サンプル</TITLE> <script language="javascript"> <!-- var nCountMax = 5; //リンクの数 var arrColor= new Array("#000000", "#FFFFFF"); function Set(nIndex) { var strName, nLoop; if (document.getElementById) { for (nLoop = 0; nLoop < nCountMax; nLoop++) { //strName = "lnkMouse"+nIndex; if (nLoop != nIndex) { document.getElementById("lnkMouse"+nLoop).style.background=arrColor[1]; } else { document.getElementById("lnkMouse"+nIndex).style.background=arrColor[0]; } } } } //--> </script> </HEAD> <BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0"> <table border="1" width="500"> <tr> <td><a href="#" onClick="Set(0);" name="lnkMouse0">クリック</a></td> <td><a href="#" onClick="Set(1);" name="lnkMouse1">クリック</a></td> <td><a href="#" onClick="Set(2);" name="lnkMouse2">クリック</a></td> <td><a href="#" onClick="Set(3);" name="lnkMouse3">クリック</a></td> <td><a href="#" onClick="Set(4);" name="lnkMouse4">クリック</a></td> </tr> </table> </BODY> </HTML> ---
- omega0322
- お礼率45% (5/11)
- JavaScript
- 回答数6
- ありがとう数4
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
同じ形でやるとすれば．．． <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サンプル</TITLE> <script language="javascript"> <!-- var nCountMax = 5; //リンクの数 var arrColor= new Array("#000000", "#FFFFFF"); function Set(nIndex) { var strName, nLoop; if (document.getElementById) { for (nLoop = 0; nLoop < nCountMax; nLoop++) { //strName = "lnkMouse"+nIndex; if (nLoop != nIndex) { document.getElementById("lnkMouse"+nLoop).style.background=arrColor[1]; } else { document.getElementById("lnkMouse"+nLoop).style.background=arrColor[0]; } } } } //--> </script> </HEAD> <BODY text="#ff80c0" link="#ff80c0" vlink="#ff80c0" alink="#ff80c0"> <table border="1" width="500"> <tr> <td id="lnkMouse0"><a href="#" onClick="Set(0);">クリック</a></td> <td id="lnkMouse1"><a href="#" onClick="Set(1);">クリック</a></td> <td id="lnkMouse2"><a href="#" onClick="Set(2);">クリック</a></td> <td id="lnkMouse3"><a href="#" onClick="Set(3);">クリック</a></td> <td id="lnkMouse4"><a href="#" onClick="Set(4);">クリック</a></td> </tr> </table> </BODY> </HTML> でしょうか。 JavaScriptでgetElementByIdとしているので、tdにidを登録します。 また、 document.getElementById("lnkMouse"+nIndex).style.background=arrColor[0]; ではなく、 document.getElementById("lnkMouse"+nLoop).style.background=arrColor[0]; ですね。 せっかくですので、 tdを <td id="lnkMouse0" onClick="Set(0);"><a href="#">クリック</a></td> <td id="lnkMouse1" onClick="Set(1);"><a href="#">クリック</a></td> <td id="lnkMouse2" onClick="Set(2);"><a href="#">クリック</a></td> <td id="lnkMouse3" onClick="Set(3);"><a href="#">クリック</a></td> <td id="lnkMouse4" onClick="Set(4);"><a href="#">クリック</a></td> とすれば、td内のどこをクリックしても色が変わります。
その他の回答 (5)
- yambejp
- ベストアンサー率51% (3827/7415)
こんな感じでいいんじゃない？ <script type="text/javascript"> function Set(obj){ n=obj; while(n){ if(n.nodeName=="TD") var objTD=n; if(n.nodeName=="TABLE") break; n=n.parentNode; } var tags=n.getElementsByTagName("td"); for(var i=0;i<tags.length;i++){ if(tags[i]==objTD) tags[i].style.backgroundColor="black"; else tags[i].style.backgroundColor="white"; } return false; } </script> <table border="1" width="500"> <tr> <td><a href="#" onclick="return Set(this);">クリック</a></td> <td><a href="#" onclick="return Set(this);">クリック</a></td> <td><a href="#" onclick="return Set(this);">クリック</a></td> <td><a href="#" onclick="return Set(this);">クリック</a></td> <td><a href="#" onclick="return Set(this);">クリック</a></td> </tr> </table>
えっ！もとに戻さなくていいの？ それなら <html> <body> <table border="1" width="500"> <tr> <td><a href="#">リンク</a></td> <td><a href="#">リンク</a></td> <td><a href="#">リンク</a></td> </tr> </table> <script> document.onclick=function(e){ var o=e?e.target:event.srcElement; if(o.tagName=='A'){ while(o.tagName!='TD'){if(o.tagName=='BODY'){o='';break;}o=o.parentNode;}; if(o) o.style.backgroundColor="#ff0"; } } </script>
No. 3です。 スタイルを記述した部分を忘れていました。すみません。 正しくはこちらです。 --- <html> <head> <style> .clicked { background-color: yellow; } </style> <script language="javascript"> window.onload = function() { setOnclick(document.getElementById('t0')); function setOnclick(node) { for (var i = 0, n = node.childNodes.length; i < n; i++) { if (node.childNodes[i].nodeType == 1) { if (node.childNodes[i].nodeName.toLowerCase() == 'a') { node.childNodes[i].onclick = function() { this.parentNode.className = 'clicked'; } } else { setOnclick(node.childNodes[i]); } } } } } </script> </head> <body> <table border="1" width="500" id="t0"> <tr> <td><a href="#">リンク</a></td> <td><a href="#">リンク</a></td> <td><a href="#">リンク</a></td> </tr> </table> </body> </html>
さらに違う形でやるとすれば・・・ --- <html> <head> <script language="javascript"> window.onload = function() { setOnclick(document.getElementById('t0')); function setOnclick(node) { for (var i = 0, n = node.childNodes.length; i < n; i++) { if (node.childNodes[i].nodeType == 1) { if (node.childNodes[i].nodeName.toLowerCase() == 'a') { node.childNodes[i].onclick = function() { this.parentNode.className = 'clicked'; } } else { setOnclick(node.childNodes[i]); } } } } } </script> </head> <body> <table border="1" width="500" id="t0"> <tr> <td><a href="#">リンク</a></td> <td><a href="#">リンク</a></td> <td><a href="#">リンク</a></td> </tr> </table> </body> </html>
違う形でやるとすれば・・・ <html> <head> <style> .col1 { background-color:#f00; } </style> </head> <body> <table border="1"> <tr><td id="ink0"><a href="#">abc</a></td><td id="ink1">def</td><td id="ink2">ghi</td></tr> <tr><td>abc</td><td>def</td><td>ghi</td></tr> <tr><td>abc</td><td>def</td><td>ghi</td></tr> </table> <script> var mem=new Object; document.body.onclick=function(e){ var sobj; if((sobj=getPNode(obj=e?e.target:event.srcElement,'TD')) && sobj.id.match(/^ink/)) sobj.className=(mem.className=(mem.className+'').replace(/col1/,''),mem=sobj,'col1'); } function getPNode(obj,tag){ while(obj.tagName!=tag){if(obj.tagName=='BODY')return;obj=obj.parentNode;}return obj; } </script> </body>
