- ベストアンサー
チェックボックスにチェックを入れると行が変わるようにしたい
ビルダーV9を使っています。 ある表で、チェックボックスを入れたいのですが 入れ方そのものが分かりません。 また、チェックボックスにチェックを入れると その行に色がつくように、 また解除すると色が元に戻るようにしたいのですが やり方を教えてください！ お手数ですが、よろしくお願いいたします。
- temndomn
- お礼率79% (34/43)
- ホームページ作成ソフト
- 回答数6
- ありがとう数3
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
cookieを読み書きするスクリプトを書き加えました。 <form>タグが必要になります。 チェックボックスに name を付ける必要があります。 <style> #tbl { margin:0px; padding:2px; color:black; font:9pt 'ＭＳ Ｐゴシック',sans-serif; border-collapse:collapse; } #tbl td { padding:3px; text-align:center; border:1px black solid; } </style> <script type="text/javascript"> var base_col="#EEEEEE";//テーブルの基本色 function changeColor(obj,col){ if(obj.checked){ obj.parentNode.parentNode.style.background=col; document.cookie =obj.name+"=true;expires=Fri, 1-Jan-2038 00:00:00 GMT;"; }else{ obj.parentNode.parentNode.style.background=base_col; document.cookie =obj.name+"=false;expires=Fri, 1-Jan-2038 00:00:00 GMT;"; } } window.onload=function(){ tbl.style.background=base_col; if(document.cookie){ var str=document.cookie.split("; "); for(i=0;i<str.length;i++){ inf=str[i].split("="); if(inf[1]=="true"){ document.forms[0].elements[inf[0]].checked=false; document.forms[0].elements[inf[0]].click(); } } } } </script> <body> <form> <table id="tbl"> <tr> <td style="width:25px;"> <input name="check1" type="checkbox" onclick="changeColor(this,'red')" /> </td> <td style="width:80px;"></td> <td style="width:80px;"></td> <td style="width:80px;"></td> </tr> <tr> <td style="width:25px;"> <input name="check2" type="checkbox" onclick="changeColor(this,'yellow')" /> </td> <td style="width:80px;"></td> <td style="width:80px;"></td> <td style="width:80px;"></td> </tr> <tr> <td style="width:25px;"> <input name="check3" type="checkbox" onclick="changeColor(this,'green')" /> </td> <td style="width:80px;"></td> <td style="width:80px;"></td> <td style="width:80px;"></td> </tr> </table> </form> </body> テーブルの基本色は var base_col="#EEEEEE";//テーブルの基本色 の#EEEEEEを書き換えてください。 .
その他の回答 (5)
- arenani_sorenani
- ベストアンサー率73% (58/79)
＞＞ローカルのＰＣのクッキーにチェック情報を保存 ＞というのは具体的にどう設定すればよいのでしょうか？ ＞アクセスした人が自分でやるということですか？ javascript でクッキーを書込み・読出しするプログラムを書く必要があります。 プログラムを用意できれば、あとは自動ですので 何もする必要はありません。 ただし、ローカルのIEの一時ファイルを削除されると クッキーの情報も消えますので、 その場合は一旦リセットされた状態(元に戻る)になります。 .
- arenani_sorenani
- ベストアンサー率73% (58/79)
＞ちなみに、チェックした状態を保存しておくことなどできるのでしょうか？ ＞ログインとかの機能なしで、なんですが・・・ この場合の保存というのは、次回にこのページを開いたときに 前回チェックした状態が再現されるという意味で解釈して ご説明しますが・・ サーバー側でＣＧＩ(Perl・PHP・ASP・JSP等々)のプログラムが稼動している場合は 比較的、簡単に実装できます。 チェックされた情報をサーバーに送信、データベースなどに格納します。 次回アクセスがあれば、データベースからこの情報を取り出し、 プログラムでチェック状況を再現したHTMLを自動作成し、アクセスしてきたＰＣに返します。 ＣＧＩなどがなく、ＨＴＭＬとjavascriptしか使えない場合は、 クッキーを利用する方法があります。 サーバー側に保存してもらえないので、ローカルのＰＣのクッキーにチェック情報を保存し、 次回同じページにアクセスしたときにはこのクッキー情報を読み取り、javascriptでチェック状況を再現します。 当然、ローカルにしか情報はないので他人と同じチェック情報を共有するなどはできません。 もし、保存するという意味が単純にHTMLとして保存するという意味なら、 サーバーのＨＴＭＬを手で書きかえる他に有効な手段はないと思います。 （まったくない訳ではないですが・・・・・)
- arenani_sorenani
- ベストアンサー率73% (58/79)
CSSで指定しているせいでしょうか・・ <style> #tbl { margin:0px; padding:2px; color:black; font:9pt 'ＭＳ Ｐゴシック',sans-serif; border-collapse:collapse; background-color:#EEEEEE; } #tbl td{ padding:3px; text-align:center; border:1px black solid; width:80px; height:25px; } table の id が tbl のtd に対して width:80px; height:25px; の指定をしてますので この部分を削除してください。 その上で、 <td width="**" height="**"> <td style="width:**px;height:**px;"> などと個別に指定してください。 .
お礼
何度も本当にどうもありがとうございました。 お陰さまで納得行くものが作れました！ ちなみに、チェックした状態を保存しておくことなどできるのでしょうか？ ログインとかの機能なしで、なんですが・・・ 図々しく申し訳ありません。 もしご存知でしたらよろしくお願いいたします。
- arenani_sorenani
- ベストアンサー率73% (58/79)
すみません。＃1ですが 訂正です・・ ×<script type=""> ○<script type="text/javascript"> 書き忘れました・・orz
お礼
お礼が遅くなりまして申し訳ございません。ありがとうございます！ 基礎的な質問で大変申し訳ないのですが、セルの幅が変えれないのですが、これはなぜでしょうか？ 自由に変えるにはどうすればよいですか？ お手数ですが、よろしくお願いいたします。
- arenani_sorenani
- ベストアンサー率73% (58/79)
<style> #tbl { margin:0px; padding:2px; color:black; font:9pt 'ＭＳ Ｐゴシック',sans-serif; border-collapse:collapse; background-color:#EEEEEE; } #tbl td{ padding:3px; text-align:center; border:1px black solid; width:80px; height:25px; } </style> <script type=""> function changeColor(obj1,obj2,col){ if(obj1.checked){ obj2.style.background=col; }else{ obj2.style.background="#EEEEEE"; } } </script> <body> <table id="tbl"> <tr> <td style="width:25px;"><input type="checkbox" onclick="changeColor(this,this.parentNode.parentNode,'red')" /></td> <td></td> <td></td> <td></td> </tr> <tr> <td style="width:25px;"><input type="checkbox" onclick="changeColor(this,this.parentNode.parentNode,'yellow')" /></td> <td></td> <td></td> <td></td> </tr> <tr> <td style="width:25px;"><input type="checkbox" onclick="changeColor(this,this.parentNode.parentNode,'green')" /></td> <td></td> <td></td> <td></td> </tr> </table> </body>
お礼
本当に何度もありがとうございます。 ＞次回にこのページを開いたときに ＞前回チェックした状態が再現される という意味で間違いないです。 言葉足らずで申し訳ございません。 ＞ローカルのＰＣのクッキーにチェック情報を保存 というのは具体的にどう設定すればよいのでしょうか？ アクセスした人が自分でやるということですか？ お手数お掛けして申し訳ございません・・・ よろしくお願いいたします。