こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

---

投稿日時 - 2008-10-26 03:38:28

QNo.4430251

すぐに回答ほしいです

質問者が選んだベストアンサー

同じ形でやるとすれば...

<!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内のどこをクリックしても色が変わります。

投稿日時 - 2008-10-26 04:08:26

このQ&Aは役に立ちましたか?

3人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.6

こんな感じでいいんじゃない?

<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>

投稿日時 - 2008-10-26 18:04:03

ANo.5

えっ!もとに戻さなくていいの?
それなら
<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>

投稿日時 - 2008-10-26 15:48:06

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>

投稿日時 - 2008-10-26 12:50:09

さらに違う形でやるとすれば・・・

---

<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>

投稿日時 - 2008-10-26 12:46:15

ANo.2

違う形でやるとすれば・・・
<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>

投稿日時 - 2008-10-26 10:40:30

あなたにオススメの質問