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

解決済

質問者：temndomn
質問日時：2006/08/11 15:02
回答数：6件

ビルダーV9を使っています。

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

お手数ですが、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (6件)

ベストアンサー優先
最新から表示
回答順に表示

No.6ベストアンサー

回答者： arenani_sorenani
回答日時：2006/08/27 02:09

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を書き換えてください。

.

- 0
- 件

通報する

No.5

回答者： arenani_sorenani
回答日時：2006/08/24 06:02

＞＞ローカルのＰＣのクッキーにチェック情報を保存

＞というのは具体的にどう設定すればよいのでしょうか？
＞アクセスした人が自分でやるということですか？

javascript でクッキーを書込み・読出しするプログラムを書く必要があります。
プログラムを用意できれば、あとは自動ですので
何もする必要はありません。

ただし、ローカルのIEの一時ファイルを削除されると
クッキーの情報も消えますので、
その場合は一旦リセットされた状態(元に戻る)になります。

.

- 0
- 件

通報する

No.4

回答者： arenani_sorenani
回答日時：2006/08/22 13:40

＞ちなみに、チェックした状態を保存しておくことなどできるのでしょうか？

＞ログインとかの機能なしで、なんですが・・・

この場合の保存というのは、次回にこのページを開いたときに
前回チェックした状態が再現されるという意味で解釈して
ご説明しますが・・

サーバー側でＣＧＩ(Perl・PHP・ASP・JSP等々)のプログラムが稼動している場合は
比較的、簡単に実装できます。
チェックされた情報をサーバーに送信、データベースなどに格納します。
次回アクセスがあれば、データベースからこの情報を取り出し、
プログラムでチェック状況を再現したHTMLを自動作成し、アクセスしてきたＰＣに返します。

ＣＧＩなどがなく、ＨＴＭＬとjavascriptしか使えない場合は、
クッキーを利用する方法があります。
サーバー側に保存してもらえないので、ローカルのＰＣのクッキーにチェック情報を保存し、
次回同じページにアクセスしたときにはこのクッキー情報を読み取り、javascriptでチェック状況を再現します。
当然、ローカルにしか情報はないので他人と同じチェック情報を共有するなどはできません。

もし、保存するという意味が単純にHTMLとして保存するという意味なら、
サーバーのＨＴＭＬを手で書きかえる他に有効な手段はないと思います。
（まったくない訳ではないですが・・・・・)

- 0
- 件

通報する

この回答へのお礼

本当に何度もありがとうございます。

＞次回にこのページを開いたときに
＞前回チェックした状態が再現される

という意味で間違いないです。
言葉足らずで申し訳ございません。

＞ローカルのＰＣのクッキーにチェック情報を保存

というのは具体的にどう設定すればよいのでしょうか？
アクセスした人が自分でやるということですか？

お手数お掛けして申し訳ございません・・・
よろしくお願いいたします。

通報する

お礼日時：2006/08/23 11:29

No.3

回答者： arenani_sorenani
回答日時：2006/08/21 16:54

CSSで指定しているせいでしょうか・・

- 0
- 件

通報する

この回答へのお礼

何度も本当にどうもありがとうございました。
お陰さまで納得行くものが作れました！

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

通報する

お礼日時：2006/08/22 10:54

No.2

回答者： arenani_sorenani
回答日時：2006/08/13 16:59

すみません。

＃1ですが
訂正です・・

×<script type="">
○<script type="text/javascript">

書き忘れました・・orz

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2006/08/21 13:14

No.1

回答者： arenani_sorenani
回答日時：2006/08/13 15:28

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