みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

JavaScript ボタンで指定の箇所を変更する方法

よろしくお願いします。m(_ _)m

現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。

【やりたい事】
1.ボタンを作りたい
水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わり
もう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。(水色→紫色→赤色→水色→紫色→・・・)

2.行単位・列単位で一括で変更したい
縦1、または横1などのボタンを押下するとボタンに対する行or列のボタン全てが一括で変更されるようなものをつくりたい

という事を行いたいと思い、色々調べてみたのですが、
発見できませんでしたので質問させていただきました。
どうかお助けください。m(>_<)m

--

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
</HEAD>
<BODY>
<form name="F1">
<table border="1">
<tr>
<td>一覧</td>
<td>縦1<br><input type="button" name="tate_btn001" id="x1y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(1)"/></td>
<td>縦2<br><input type="button" name="tate_btn002" id="x2y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(2)"/></td>
<td>縦3<br><input type="button" name="tate_btn003" id="x3y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(3)"/></td>
</tr>
<tr>
<td>横1
<input type="button" name="yoko_btn001" id="x0y1" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(1)"/>
</td>
<td><input type="button" name="btn001" id="x1y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn002" id="x2y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn003" id="x3y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
</tr>
<tr>
<td>横2
<input type="button" name="yoko_btn002" id="x0y2" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(2)"/>
</td>
<td><input type="button" name="btn004" id="x1y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn005" id="x2y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn006" id="x3y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
</tr>
<tr>
<td>横3
<input type="button" name="yoko_btn003" id="x0y3" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(3)"/>
</td>
<td><input type="button" name="btn007" id="x1y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn008" id="x2y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
<td><input type="button" name="btn009" id="x3y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td>
</tr>
</table>
</form>

投稿日時 - 2008-08-12 21:39:12

QNo.4247116

すぐに回答ほしいです

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

なんか効率わるい書き方になってしまいましたが
フローとしてはだいたいこんなもんでは?

<HTML>
<HEAD>
<style type="text/css">
input.aqua{
height:15px; width:15px; background-color:22bbff;
}
input.purple{
height:15px; width:15px; background-color:cc55ee;
}
input.red{
height:15px; width:15px; background-color:ff3300;
}
</style>
<script type="text/javascript">
function rotateColor(obj){
var c=obj.className;
if(c.match(/aqua/)) c=c.replace(/aqua/,"purple");
else if(c.match(/purple/)) c=c.replace(/purple/,"red");
else if(c.match(/red/)) c=c.replace(/red/,"aqua");
obj.className=c;
}
function changeColors(obj,cls){
var c=obj.className.match(/(aqua|purple|red)/)[1];
var tags=document.getElementsByTagName("input");
for(var i=0;i<tags.length;i++){
var cc=tags[i].className;
if(cc.match(RegExp(cls))){
cc=cc.replace(/(aqua|purple|red)/,c);
tags[i].className=cc;
}
}
}
</script>
</HEAD>
<BODY>
<form>
<table border="1">
<tr>
<td>一覧</td>
<td>縦1<br><input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'col1');" /></td>
<td>縦2<br><input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'col2');" /></td>
<td>縦3<br><input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'col3');" /></td>
</tr>
<tr>
<td>横1
<input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'row1');" />
</td>
<td><input type="button" class="col1 row1 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col2 row1 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col3 row1 aqua" onclick="rotateColor(this);" /></td>
</tr>
<tr>
<td>横2
<input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'row2');" />
</td>
<td><input type="button" class="col1 row2 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col2 row2 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col3 row2 aqua" onclick="rotateColor(this);" /></td>
</tr>
<tr>
<td>横3
<input type="button" class="aqua" onClick="rotateColor(this);changeColors(this,'row3');" />
</td>
<td><input type="button" class="col1 row3 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col2 row3 aqua" onclick="rotateColor(this);" /></td>
<td><input type="button" class="col3 row3 aqua" onclick="rotateColor(this);" /></td>
</tr>
</table>
</form>
</body>
</html>

投稿日時 - 2008-08-12 22:24:49

お礼

すばらしい回答ありがとうございます。
非常に助かりましたm(_ _)m

投稿日時 - 2008-08-13 09:49:20

ANo.1

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

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

回答(2)

ANo.2

若干、修正しましたがこんな感じでどうでしょうか。

<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css; charset=shift_jis">
<meta http-equiv="content-script-type" content="text/javascript">
<style>
<!--
.color1,.color2,.color3 {
height:15px;
width:15px;
}

.color1 {
background-color:22bbff;
}

.color2 {
background-color:cc55ee;
}

.color3 {
background-color:ff3300;
}
-->
</style>
<script type="text/javascript">
<!--
// セルの数 (x=縦/y=横)
var limit = {
'x' : 3,
'y' : 3
};
function change(button) {
switch(button.className) {
case 'color1':
button.className = 'color2';
break;
case 'color2':
button.className = 'color3';
break;
case 'color3':
button.className = 'color1';
break;
}
}

function tate(button) {
var num = Number(button.id.match(/\d{3}$/));
for(var i = num; i < limit['x'] * limit['x'] + num; i += limit['x']) {
if(('000' + i).match(RegExp('^.*(\\d{3})$'))) {
change(document.getElementById('btn' + RegExp.$1));
}
}
return;
}

function yoko(button) {
var input = document.getElementsByTagName('input');
var num = Number(button.id.match(/\d{3}$/));
for(var i = num; i < limit['y'] + num; i++) {
if(('000' + i).match(RegExp('^.*(\\d{3})$'))) {
change(document.getElementById('btn' + RegExp.$1));
}
}
return;
}
// -->
</script>
<title></title>
</ead>
<body>
<form name="F1">
<table border="1">
<tr>
<td>一覧</td>
<td>縦1<br><input type="button" id="tate_btn001" class="color1" onclick="tate(this)"></td>
<td>縦2<br><input type="button" id="tate_btn002" class="color1" onclick="tate(this)"></td>
<td>縦3<br><input type="button" id="tate_btn003" class="color1" onclick="tate(this)"></td>
</tr>
<tr>
<td>横1
<input type="button" id="yoko_btn001" class="color1" onclick="yoko(this)">
</td>
<td><input type="button" id="btn001" class="color1" onclick="change(this);"></td>
<td><input type="button" id="btn002" class="color1" onclick="change(this);"></td>
<td><input type="button" id="btn003" class="color1" onclick="change(this);"></td>
</tr>
<tr>
<td>横2
<input type="button" id="yoko_btn004" class="color1" onclick="yoko(this)">
</td>
<td><input type="button" id="btn004" class="color1" onclick="change(this);"></td>
<td><input type="button" id="btn005" class="color1" onclick="change(this);"></td>
<td><input type="button" id="btn006" class="color1" onclick="change(this);"></td>
</tr>
<tr>
<td>横3
<input type="button" id="yoko_btn007" class="color1" onclick="yoko(this)">
</td>
<td><input type="button" id="btn007" class="color1" onclick="change(this);"></td>
<td><input type="button" id="btn008" class="color1" onclick="change(this);"></td>
<td><input type="button" id="btn009" class="color1" onclick="change(this);"></td>
</tr>
</table>
</form>
</body>
</html>

あと、IDは重複できませんし、HTMLで閉じタグのないタグに対して
" />" で閉じるのは文法違反です。
この書き方はXHTMLのみです。

投稿日時 - 2008-08-13 01:00:17

お礼

すばらしい回答ありがとうございます。

>>あと、IDは重複できませんし、HTMLで閉じタグのないタグに対して
" />" で閉じるのは文法違反です。
この書き方はXHTMLのみです。

非常に勉強になりました。ありがとうございます。

投稿日時 - 2008-08-13 09:50:55