- ベストアンサー
JavaScript ボタンで指定の箇所を変更する方法
よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。 【やりたい事】 １．ボタンを作りたい 水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わり もう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。（水色→紫色→赤色→水色→紫色→・・・） ２．行単位・列単位で一括で変更したい 縦１、または横１などのボタンを押下するとボタンに対する行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>
- omega0322
- お礼率45% (5/11)
- JavaScript
- 回答数2
- ありがとう数7
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
なんか効率わるい書き方になってしまいましたが フローとしてはだいたいこんなもんでは？ <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>
その他の回答 (1)
- pick52
- ベストアンサー率35% (166/466)
若干、修正しましたがこんな感じでどうでしょうか。 <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のみです。
お礼
すばらしい回答ありがとうございます。 ＞＞あと、IDは重複できませんし、HTMLで閉じタグのないタグに対して " />" で閉じるのは文法違反です。 この書き方はXHTMLのみです。 非常に勉強になりました。ありがとうございます。
お礼
すばらしい回答ありがとうございます。 非常に助かりましたm(_ _)m