dポイントプレゼントキャンペーン実施中！

別ページからOnclickでテーブルの背景色を変更し、固定する方法

解決済

  • 質問者：aichan_san
  • 質問日時：
  • 回答数：3件

初めて質問させていただきます。javascriptが初心者なもので申し訳ありません。
babu_baboo様が以前回答していらっしゃいました、別ページからinput文のOnclickで、指定ページのテーブルセルの背景色を変更する方法を使わせていただきましたものです。このプログラムはとても効果があり大変助かりました。しかし表の各セルに指定された別ページからOnclickして、そのセルの背景色は変わるのですがこの状態を保持することができません。phpでバッファリングして表のページを名前を付けて保存して、もう一度呼びたしますと各セルの背景色は元の背景色のない状態に戻ってしまいます。なんとか保存状態のまま固定できないものでしょうか。
　　AﾍﾟｰｼﾞからOnclickをしてBﾍﾟｰｼﾞの表のテーブルB1→背景色が赤に変わる
　　CﾍﾟｰｼﾞからOnclickをしてBﾍﾟｰｼﾞの表のテーブルB2→背景色が赤に変わる
DﾍﾟｰｼﾞからOnclickをしてBﾍﾟｰｼﾞの表のテーブルB3→背景色が赤に変わる
このようにBページの各セルB1,B2,B3････の背景色が全てのセルにおいて変わったままの状態で
保存され、次に呼び出された時もこのままの状態で呼び出されるようにしたいと考えておりますが
お知恵を拝借したいと思います。何卒よろしくお願いいたします。

通報する

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

質問の本文を隠す

A 回答 (3件)

参考程度に

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

No2です。



＞ローカルストレージへの保存はテキストだけみたいですが～～
テキスト形式で保存されるだけで、例えば数値の123は文字列の"123"として記録すれば、javascriptの場合はあまり変換を意識しなくても使えると思いますが？
前回挙げた解説ページに背景色の記録例があったように記憶していますが…
別に色だからと言って、カラーコードを記録しなければいけないという決まりはないので、全体で整合がとれていれば自前の記号に代えても問題ありません。

実は、web strageはあまり使ったことが無いので、確認のためサンプルを作成してみました。
質問者様のケースがどうなっているのかわからないので、簡単に一つのページでテーブルの背景色を記録・読出しする例です。
色の種類を仮に4色として、画面表示上はclass設定で制御しています。（color0～clor3の4種類)
画面で、セルをクリックすると背景色が（黄→橙→黄緑→紺→）と順に変化します。
（スクリプトでクラス名を順に変更しているだけです）

色の変わり方はどうでも良いのですが、記録するためのデータとしては、例ではセルの数が少ないので、各セルのclassを全て連結し、まとめて一つのデータとして記録するようにしています。
（もちろん、各セル毎に記録するとか、色のついたセルだけ記録するとか、あるいはclass名ではなく色コードそのものを記録するなど、方法はいろいろ考えられるところです。）
具体的な方法はいろいろあると思いますので、あくまでもWeb Strageを利用した記録と読み出しの一例として考えてください。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
#hoge { border-collapse:collapse; border:1px solid #666; font-weight:bold; }
#hoge td { width:5em; height:3em; border: 1px solid #666; text-align:center; }
#hoge td, #hoge td.color0 { background-color:#FFC; }
#hoge td.color1 { background-color:#FCC; }
#hoge td.color2 { background-color:#CFC; }
#hoge td.color3 { background-color:#CCF; }
</style>
</head>

<body>
<table id="hoge">
<tr>
<td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
</tr><tr>
<td>2-1</td><td>2-2</td><td>2-3</td><td>2-4</td>
</tr><tr>
<td>3-1</td><td>3-2</td><td>3-3</td><td>3-4</td>
</tr><tr>
<td>4-1</td><td>4-2</td><td>4-3</td><td>4-4</td>
</tr>
</table>

<script type="text/javascript">
var strage = window.localStorage;
if(!strage) alert("LocalStrageが使えないため、記録・保存はできません");
getColorData();

//セルをクリックすると背景色を変える
document.getElementById("hoge").addEventListener("click", function(e){
var t = e.target;
if(t.nodeName != "TD") return;
var c = ((t.className.replace("color","") | 0) + 1) % 4;
t.className = "color" + c;
setColorData();
}, false);

//Web Storageから読み込む
function getColorData(){
if(!strage) return;
var data = (strage["colorData"] || "").split("|");
var elms = document.querySelectorAll("#hoge td");
Array.prototype.map.call(elms, function(e, i){
e.className = data[i]?data[i]:"";
});
}

//Web Storageに記録
function setColorData(){
if(!strage) return;
var data = [], elms = document.querySelectorAll("#hoge td");
Array.prototype.map.call(elms, function(e){
data.push(e.className)
});
strage["colorData"] = data.join("|");
}
</script>
</body>
</html>


※ テストしてみたところ、IEはローカル環境ではstrageは利用できないようですのでご注意ください。

※ babu_babooさんとは以前この掲示板でお互いにお勉強をさせていただいていましたが、ご提示のスクリプトは相当に古いようで、さすがに最近のブラウザであればそこまでの記述は必要なさそうに思えますね。
内容的には、どうやらlocation.hashを介してデータのやり取りをしているようですが、全体像がわからないので、どのように考えると簡単になるのかは判断が出来かねるところです。
    • good
    • 1
    • 件
通報する
この回答へのお礼

fujillinさん、この度はご回答いただきありがとうございました。
また、サンプルをご提示いただき大変助かりました。
戴きましたサンプルを使って自分のPCに立てたxamppサーバーにIEでアップしましたところローカルストレージは使用できないことがわかりました。Chromeでアップしましたら保存したファイル名でアップした状態を再現できました。感激しました。本当にありがとうございました。もう少し質問がありますので改めていたします。宜しくお願いいたします。

通報する
お礼日時：2018/01/26 16:28

参考程度に

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



ブラウザを閉じたり、他のURLに遷移したりすると、前のページでの変更内容などは消去されてしまいます。
それなので、次に同じページを開いても最初の状態（初期状態）に戻って表示されることになります。
変更内容を記憶しておくには、消去されない場所に記録するようにしておいて、次に表示するときは記録の内容に応じた表示にするといった仕組みを組み込む必要があります。

ご質問とは内容的に少し異なりますが、タブの開閉状態や開閉式メニューの開閉状態を記録しておいて、次回はその状態で表示するというのと同じような仕組みと言えます。（対象とする内容が異なるだけ）

・・で、どこに記録しておくかというと、No1様の回答にもあるように、サーバ側に記録する方法とクライアント側（PC側）に記録する方法とが考えられます。
どちらでも実現できますが、javascriptだけで実現したいのであれば後者の方が容易でしょう。（前者はサーバ側のプログラムが必要です）

記録する場所としては、クッキーまたはウェブストレージなどが利用できます。
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/We …

具体的には、以下のような2種類の処理を追加することで実現できるものと思います。
・対象とする内容の変更が発生したら、同時に記録も更新しておく
・ページ読込み時に記録内容を確認し、それに応じた表示内容にする
    • good
    • 0
    • 件
通報する
この回答へのお礼

早速のご回答ありがとうございました。ページの変更をPC側に保存する方法としてローカルストレージを使った方法をご指示いただきました。ローカルストレージへの保存はテキストだけみたいですが、別ページのOnclickで下記のテーブルの例えばb1を指定して、そのセルb1の背景色が赤くなったとしますと、これをローカルストレージに保存するとするとどのような指定をすればよろしいのか教えていただけないでしょうか?宜しくお願いいたします。

<script type="text/javascript">

var TB = {
b1:['td01','background-color:red'],
b2:['td02','background-color:red'],
b3:['td03','background-color:red'],
b4:['td04','background-color:red'],
b5:['td05','background-color:red'],
b6:['td06','background-color:red'],
b7:['td07','background-color:red'],
b8:['td08','background-color:red'],
b9:['td09','background-color:red'],
b10:['td10','background-color:red'],
};

/*@cc_on @if(1)attachEvent('on'+@else@*/addEventListener(/*@end@*/'load',function(){
var　e,o=TB[location.hash.substring(1)];if(o&&(e=document.getElementById(o[0]))) e.style.cssText=o[1];},false);
</script>

通報する
お礼日時：2018/01/24 09:58

No.1

  • 回答者： yambejp
  • 回答日時：

ブラウザでデータ保持をするなら一般にクッキーを利用します。


サーバー側にデータを保持するならセッションやデータベースを利用します
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございました。
具体的な方法がまだわかりませんが、ローカルストレージの使い方を勉強してみます。

通報する
お礼日時：2018/01/24 09:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報