• ベストアンサー

チェックボックスにチェックを入れると行が変わるようにしたい

ビルダーV9を使っています。 ある表で、チェックボックスを入れたいのですが 入れ方そのものが分かりません。 また、チェックボックスにチェックを入れると その行に色がつくように、 また解除すると色が元に戻るようにしたいのですが やり方を教えてください！ お手数ですが、よろしくお願いいたします。

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

  • ベストアンサー
回答No.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)

回答No.5

＞＞ローカルのＰＣのクッキーにチェック情報を保存 ＞というのは具体的にどう設定すればよいのでしょうか？ ＞アクセスした人が自分でやるということですか？ javascript でクッキーを書込み・読出しするプログラムを書く必要があります。 プログラムを用意できれば、あとは自動ですので 何もする必要はありません。 ただし、ローカルのIEの一時ファイルを削除されると クッキーの情報も消えますので、 その場合は一旦リセットされた状態(元に戻る)になります。 .

回答No.4

＞ちなみに、チェックした状態を保存しておくことなどできるのでしょうか？ ＞ログインとかの機能なしで、なんですが・・・ この場合の保存というのは、次回にこのページを開いたときに 前回チェックした状態が再現されるという意味で解釈して ご説明しますが・・ サーバー側でＣＧＩ(Perl・PHP・ASP・JSP等々)のプログラムが稼動している場合は 比較的、簡単に実装できます。 チェックされた情報をサーバーに送信、データベースなどに格納します。 次回アクセスがあれば、データベースからこの情報を取り出し、 プログラムでチェック状況を再現したHTMLを自動作成し、アクセスしてきたＰＣに返します。 ＣＧＩなどがなく、ＨＴＭＬとjavascriptしか使えない場合は、 クッキーを利用する方法があります。 サーバー側に保存してもらえないので、ローカルのＰＣのクッキーにチェック情報を保存し、 次回同じページにアクセスしたときにはこのクッキー情報を読み取り、javascriptでチェック状況を再現します。 当然、ローカルにしか情報はないので他人と同じチェック情報を共有するなどはできません。 もし、保存するという意味が単純にHTMLとして保存するという意味なら、 サーバーのＨＴＭＬを手で書きかえる他に有効な手段はないと思います。 （まったくない訳ではないですが・・・・・)

temndomn
質問者

お礼

本当に何度もありがとうございます。 ＞次回にこのページを開いたときに ＞前回チェックした状態が再現される という意味で間違いないです。 言葉足らずで申し訳ございません。 ＞ローカルのＰＣのクッキーにチェック情報を保存 というのは具体的にどう設定すればよいのでしょうか？ アクセスした人が自分でやるということですか？ お手数お掛けして申し訳ございません・・・ よろしくお願いいたします。

回答No.3

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;"> などと個別に指定してください。 .

temndomn
質問者

お礼

何度も本当にどうもありがとうございました。 お陰さまで納得行くものが作れました！ ちなみに、チェックした状態を保存しておくことなどできるのでしょうか？ ログインとかの機能なしで、なんですが・・・ 図々しく申し訳ありません。 もしご存知でしたらよろしくお願いいたします。

回答No.2

すみません。＃1ですが 訂正です・・ ×<script type=""> ○<script type="text/javascript"> 書き忘れました・・orz

temndomn
質問者

お礼

お礼が遅くなりまして申し訳ございません。ありがとうございます！ 基礎的な質問で大変申し訳ないのですが、セルの幅が変えれないのですが、これはなぜでしょうか？ 自由に変えるにはどうすればよいですか？ お手数ですが、よろしくお願いいたします。

回答No.1

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

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • チェックボックスのある行を非表示にすると、チェックボックスも非表示にな

    チェックボックスのある行を非表示にすると、チェックボックスも非表示になる方法を教えて下さい。 チェックボックスが入っている行を非表示にしても、チェックボックスだけ表示され続けてしまいます。 以前どこかでチェックボックスが非表示になるプログラムがあり、表示されなかったのですが、いろいろといじっているうちに間違って削除してしまったようです。 行の非表示を解除すると（再表示を選ぶと）、チェックボックスもちゃんと表示されるものを希望しています。 ネットで検索しても再度見つける事ができませんでした。 もしお分かりになる方がいらっしゃいましたら宜しくお願い致します。

  • チェックボックスについて

    こんばんは。いつもお世話になっておりますが、こちら（JavaScript）では、初めての投函です。 よくヤフーやホットメールなどのwebmailの受信ボックスなどに、削除するためのチェックボックスが備わっておりますが、全てのチェックを入れるために、最初の一行目のチェックボックスにチェックを入れることで全てにチェック。チェックを外す事で全てを外す。という動作が行われていると思います。 私、PHPの方ではよく質問させていただく事もあり、お恥ずかしいながら、上記質問をPHPで・・と思っていたら、これら動作はJavaScriptであることをお教え頂きました。 これまでJavaScriptには無縁であったこともあり、色々なサイトにお邪魔しているものの、設定ボタン、解除ボタンによる設定・解除の説明はあるものの、チェックボックスによる、これらの動作の説明がなく、改めてこちらにて質問させて頂くに至りました。 色々と試してはいるものの、チェックボックスにチェックを入れると全てにチェックが入るが、解除するまでに至っておりません。 お忙しい中恐縮ですが、ご指導のほど宜しくお願い申し上げます。

  • Javascript? チェックボックスにチェックをいれると・・

    Yahooメールのように、チェックボックスにチェックをいれると その行（<tr>タグ）に色がつくようなJavascriptを探しています。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • チェックボックスにより行の表示非表示

    Excel2007を使用し、以下のようなチェックリストを作成しました。 「□」はActiveXコントロールのチェックボックスです。 1行目：□　とくにありません 2行目：□　りんご 3行目：□　もも 4行目：□　みかん 5行目：□　ばなな 2行目にチェックが入っていれば □りんご と表示、 2行目と5行目にチェックが入っていれば □りんご □ばなな と表示、そして 2～5行目のチェックボックスにすべてチェックが入っていない場合は □とくにありません だけを表示させたいです。 どのようにマクロをくんだらいいでしょうか？ ちなみに、1シートに表示されるチェックボックスはこれだけでなく、 7行目：□　とくにありません 8行目：□　いぬ 9行目：□　ねこ 10行目：□　とり と、果物、動物それぞれで同じ動作をさせたいと思っています。 IfかCaseを組めばいいのかと思っているのですが 複雑な条件文をどのように記述すればいいかわかりません。 ご教授お願いいたします！

  • 行クリックでチェックボックスをOn/Off、行全体を着色などさせたい

    以下のように、１行に１チェックボックスがあります。 　(1) 各行のどこかをクリックするたびにチェックボックスのON/OFFを切り替え 　(2) チェックボックスがONである間は、行全体の背景を黄色に塗りつぶす 　　　　（チェックが解除されたら黄色着色も解除） といった動作をさせたいのですが、記述方法をご教示いただけますと幸いです。 <table> 　<tr> 　　　<td>1</td> 　　　<td>東京</td> 　　　<td><input type="checkbox" name="myvalue" value="1"></td> 　</tr> 　<tr> 　　　<td>2</td> 　　　<td>神奈川</td> 　　　<td><input type="checkbox" name="myvalue" value="2"></td> 　</tr> 　<tr> 　　　<td>3</td> 　　　<td>千葉</td> 　　　<td><input type="checkbox" name="myvalue" value="3"></td> 　</tr> </table>

  • データグリッドビューの行にチェックボックス

    VB2010で、データグリッドビューの行にチェックボックスを入れたいのです。 DataGridViewCheckBoxCellでできるかなと思っているのですが、 下記のコードではチェックボックス行が追加されません。 どう修正すればよいでしょうか。 ご存知の方教えてください。よろしくお願いします。 Dim CB As New DataGridViewCheckBoxCell Me.DataGridView1.Rows.Add(CB)

  • エクセルでのチェックBOXの並べ替えについて

    エクセルでチェックBOXを使って表を作成しました。 列数は10列以上で行数も100行位はあります。 行ごとで並べ替えをすると チェックBoxのみずれてしまいます。 下記についてはネットで調べ設定済みです。 (1)Boxがセル内に余裕をもっておさめる (2)セルに合わせて移動する設定にする。 (3)並べ替えをする時に表全体を選択する。 3列位の表だとちゃんとチェックBoxも行に合わせて動いてくれるのですが・・・・ 列数や行数が多い場合は無理なのでしょうか？ 何か裏技のようなものがあるのでしょうか？ 列数が少ないと出来て多くなると出来ないというのもいまいち納得がいかないのですが・・・ 方法をご存知の方がいらっしゃったら教えてくださいm(_　_)m 宜しくお願いします。

  • Excelで各行にチェックボックスを設けたのですが

    よろしくお願いします。 Excel2000で表計算をしており、各行にチェックボックスをつけているのですが、行を並び替えするとチェックボックスは並び替えされません。 一緒に並び替えされるようにはできないのでしょうか？

  • チェックボックスtableの行の複数選択

    jqueryをやっています。 始めて数週間です。 tableは一番左列がチェックボックスで、一番左列のヘッダ行がチェックボックスです。 やりたいことは、一番左の列にチェックボックスがあるtableをjqueryで操作して、 1.チェックボックス列以外の列をクリックしたときチェックボックスをONにする 2.チェックがついた行は背景色を変える 3.マウスオーバー中に1行ハイライト表示する 4.一番左のヘッダのチェックボックスONで全行の背景色を変える。 参考にしたサイトは以下のサイトです。 http://kachibito.net/snippets/table-tr-check ここはバグがあって一番左のチェックボックスはクリックしてもONになりません。 いろいろ調べて左列のチェックボックスONのとき、行クリックのイベントに行っているみたいです。 チェックONの行の背景色をつけたりもしたいのですが、よくわかりませんでした。 ヒントだけでも教えてもらえないでしょうか。 よろしくお願いします。

  • チェックボックスにより行の表示非表示

    Excel2007を使用し、以下のようなチェックリストを作成しました。 「□」はActiveXコントロールのチェックボックスです。 2行目：□　りんご 3行目：□　もも 4行目：□　みかん 5行目：□　ばなな 6行目：とくにありません 7行目：りんごがすき 8行目：ももがすき 9行目：みかんがすき 10行目：ばなながすき 2行目にチェックが入っていれば 7行目：りんごがすき を表示、 2行目と5行目にチェックが入っていれば 7行目：りんごがすき 10行目：ばなながすき を表示、そして 2～5行目のチェックボックスにすべてチェックが入っていない場合は 6行目：とくにありません だけを表示させたいです。 どのようにマクロをくんだらいいでしょうか？ ちなみに、1シートに表示されるチェックボックスはこれだけでなく、 11行目：□　いぬ 12行目：□　ねこ 13行目：□　とり 14行目：とくにありません 15行目：いぬがすき 16行目：ねこがすき 17行目：とりがすき と、果物、動物それぞれで同じ原理で同様の動作をさせたいと思っています。 IfかCaseを組めばいいのかと思っているのですが 複雑な条件文をどのように記述すればいいかわかりません。 ご教授お願いいたします！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する