別ページからOnclickでテーブルの指定セルの背景色を変更し、ローカルストレージに保存する方法

締切済

質問者：aichan_san
質問日時：2018/01/26 16:45
回答数：2件

fujillinさん、前回はサンプルをご提示いただきありがとうございました。このサンプルは、このテーブルのセルの上でクリックしたとき背景色が変わるものなのですが、以前お書きしたように私が今作っているプログラムは、Aページの
<form name="fomes"><input type="button" style="width:100%;padding:10px;font-
size:30px;"value="全問正解の方は、こちらをクリック!" onclick="location.href='localhost/mondai_hyou.html#b1';">
<input type="button" style="width:100%;padding:10px;font-size:30px;" value="一問でも不正解の方は、こちらをクリック!" onclick="location.href='localhost/mondai_setumei.html;'">
</form>からBページの表のテーブルセルのb1の背景色を変えて、ファイル名を付けてサーバーにアッ
プする。そして、この状態をローカルストレージに保持して、再びこのファイル名で呼び込むとき、
前の状態のまま呼びだすことができればプログラムもほぼ完成が見えてくるのですが、
AページからBページのこの部部のが表になります。
<body><table id="abc" frame="void" border="1">
<thead>
<tr>
<th>年度 / 項目</th> <th>平成26年</th><th>平成27年</th><th>平成28年</th>･････････････････
</tr>
</thead>
<tbody>
<tr><td><B>問題の計算</B></td>
<td id="td01"><a href="localhost/mondai_1.html">問題１</a></td>
<td id="td02"><a href="localhost/mondai_2.html">問題２</a></td>
<td id="td03"><a href="localhost/mondai_3.html" >問題３</a></td>
･････････････････</tr>
</tr>
</tbody>
</table>
サンプルでお示しいただきました方法を使って、この表の背景色を変える方法をお教えいただきたい
のですが、お力添えを宜しくお願いいたします。

通報する

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

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2018/01/26 19:36

こんにちは

残念ながら、断片情報を示されてもほとんどわかりません。

前の回答
https://oshiete.goo.ne.jp/qa/10234256.html
にも記しましたように全体像がまったくわからないので、お断りしましたように前回回答はあくまでも「web strage」の読み書きの例として示したにすぎません。
ですので、（私にはわからない）質問者様のなさりたいことをどのように実装すれば良いのかは考えることができません。

質問者様にとっては当たり前の情報であっても、ご質問文に記されていない情報は、回答者にとってはわからないものとなります。
例えば、このご質問文に提示されているHTMLの断片を例にすれば、Aページのボタンをクリックした時に表示されるmondai_setumei.htmlというのは、Bページのことなのかさえ確信はできません。（どうやらBページのことらしいと推測はできますが…）
さらには、Bページからリンクしているmondai_1～3（もっとあるのかも？）やその先がどうなっているのかは、もはや謎です。
（もちろん、不要な情報を滅多矢鱈と並べ立てられるよりは、必要な部分に絞って他は省略していただく方が簡潔な質問になるので良いのですが、仕組みにかかわる部分に関しては最低限の情報が必要だと思います。）

「色が変わる」とのことですが、そのタイミングがいつ、どのようにしてなのかもわからないですね。（Aページの上側のボタンをクリックした時だけなのか、他にもあるのか）
ただし、前回申し上げましたように、対象とする情報が更新された際に同時にストレージに保存する処理を行うようにしておけば、それで記録はできるはずと思います。
（最小限の処理回数でなさりたい場合は、毎回記録しなくても済む可能性はありますが…）

読み込み時のセットはページ表示時に行えばよいと想像しますが、どうやらどこかのタイミングで読み込み時にも色を変えているらしいので、保存しておいた色の情報と新しい情報（←このような情報があるのかわかりませんが）とをどのように組み合わせるのが良いのかも判断できません。
さらに、具体的な内容として、「色が変わる」のはどの範囲で、どのような色の種類があり、色の付き方に規則性（関連等）があるのかバラバラなのかなどの条件によっても、記録・保存すべき内容は変わってくるのかも知れません。

・・・とは言え、なんとなくの印象としては、Bページ上で「記録・保存」も「読み出し」も行えば済むのではないかと感じます。しかしながら、なんせ全体の構成やつながりをまったくわかっていませんので、当たるも八卦的な感じではあります。

※ 前回も書きましたが、IEはローカル環境ではstrageを利用できない可能性がありますので、もしもそのような環境なのであれば、情報の保存先としてcookieを利用なさる方が賢明かも知れませんね。（情報量がそれほど多くはなさそうに感じますので）

※ ついでながら、ここは一般に解放された質問掲示板なので、個人に対する質問はマナー違反になりそうな気がしますし、回答者を限定したところで、質問者様が得をすることはまったくないと思います。
※ 前回の質問などの経緯や情報がわかるようにしておけば、他の方の回答が得られるかもしれませんよ。（整理した情報を提供できならば、前回を引用する必要はありませんけれど）

- 0
- 件

通報する

この回答へのお礼

fujillinさん、早速のご回答ありがとうございました。また、個人的な質問をしてしまい申し訳ありませんでした。質問内容に不備が多く的を得た質問内容を示すことができず混乱をさせてしまい申し訳ありませんでした。ご迷惑をおかけいたしました。

通報する

お礼日時：2018/01/26 21:36

No.2

回答者： babu_babu_baboo
回答日時：2018/01/27 23:39

ローカルストレージはつかいこなせないので。

b.html と a.html をおなじところにおいて、b.html からよびだしてみる。

a.html
--
<!DOCTYPE html>
<title>a.html</title>
<meta charset="utf-8">
<style>
　td { width:5em; }
　td.mark { background: #fdd; }
</style>

<body>
<table id="abc" border="1">
　<tbody>
　　<tr><td>A <td>B <td>C <td>D
　　<tr><td>E <td>F <td>G <td>H
</table>

<script>
function setCookie (doc, name, value, expires, path, domain, secure) {
　if (3 > arguments.length)
　　throw new Error;
　var cookie = [ encodeURIComponent (name) + '=' + encodeURIComponent (value) ];
　if (expires) cookie[cookie.length] = 'expires=' + new Date (expires).toUTCString ();
　if (path) cookie[cookie.length] = 'path=' + encodeURI (path);
　if (domain) cookie[cookie.length] = 'domain=' + encodeURI (domain);
　if (secure) cookie.push ('secure');
　doc.cookie = cookie.join ('; ');
}

function getCookie (doc, name) {
　var n = encodeURIComponent (name).replace (/\W/g, '\\$&');
　var v = doc.cookie.match (new RegExp (n + '\\s*=\\s*(.*?)(?:[;,\\s]|$)'));
　return (v) ? decodeURIComponent (v[1]): '';
}

let
　reg = /r(\d+)c(\d+),/ig,
　table = document.querySelector ('#abc'),
　hash = location.hash,
　mark = /^#cls$/i.exec (hash) ? '': getCookie (document, 'MARK'),
　rc;

if (/^#r(\d+)c(\d+)$/i.exec (hash))
　mark += hash.slice(1) + ',';

for (; rc = reg.exec (mark); )
　table.rows[rc[1]].cells[rc[2]].className = 'mark';

setCookie (document, 'MARK', mark);

</script>

--

b.html
--
<!DOCTYPE html>
<title>b.html</title>
<meta charset="utf-8">

<body>
<p>
　<a href="a.html#r1c1">R1C1</a>,
　<a href="a.html#r0c3">R0C3</a>,
　<a href="a.html#cls">cls</a>
</p>