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

締切済

質問者：aichan_san
質問日時：2018/01/29 23:05
回答数：3件

前回質問の内容が分かりにくかったと思いますので画像を添付いたしました。今作っているwebページの概要です。AページをクリックするとBページのテーブルの1-1セルの背景色が赤くなり、またCページをクリックするとBページのテーブルの1-2セルの背景色が赤くなるようにしたいと思います。
そして、このBページをPHPでバッファリングをして保存する際に、このページをwebストレージに保存できたら次にBページを呼び出すときに元の状態で呼び出すことができればと考えておりますが可能でしょうか。難しい質問だとは思いますがご理解いただけた方は宜しくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3

回答者： babu_babu_baboo
回答日時：2018/01/30 12:10

何のためにページを保存する必要があるのさ？

保存すべきは、回答者のIDと正解した問題の番号であって、それをデータベースにでも記録することだろ？
正解表を表示する時にPHPでデータベースからそれを拾ってくればよいのでは？

なんであろうとBページには情報はローカル側にあるのだから、同じページを表示する限り、テーブルのセルは赤いまま。

というか、＃２で書いたコードを試してみたの？
そもそも location.hash を利用して制御するなんて、小手先の策ですよ？

- 0
- 件

通報する

この回答へのお礼

babu_babu_babooさん、こんばんは。先日はご丁寧にプログラムを書いていただきありがとうございました。このプログラムを記述してやってみましたが知識がないせいか私の意図する結果は現れませんでした。勉強してトライしてみます。ありがとうございました。

通報する

お礼日時：2018/02/04 21:49

No.2

回答者： babu_babu_baboo
回答日時：2018/01/30 02:02

もちろん、全角空白は半角空白に置換してくださいね

いつもは文字制限で分割したりするのですが、今回は余ったので
インデントを付加しました。
php側の処理は？
--
a.html
--
<!DOCTYPE html>
<title>a.html</title>
　<meta charset="utf-8">
　　
　　　 <body>
　　　　　<p>
　　　　　　 <input
　　　　　　　　type="button"
　　　　　　　　　value="r0c1"
　　　　　　　　　　onclick="location.href='b.html#'+this.value;"
　　　　　　　　　　>
　　　　　　　　　　<input
　　　　　　　　　type="button"
　　　　　　　　value="cls"
　　　　　　 onclick="location.href='b.html#'+this.value;"
　　　　　>
　　　 </p>

--
b.html
--
<!DOCTYPE html>
<title>b.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>
<input
　type="button"
　　value="戻る"
　　　 onclick="history.back()"
　　　　　>
　　　　　　 <script>
　　　　　　　　function setStorage (key, value = '') {
　　　　　　　　　localStorage.setItem (key, value);
　　　　　　　　　　}
　　　　　　　　　　
　　　　　　　　　　function getStorage (key) {
　　　　　　　　　return localStorage.getItem (key);
　　　　　　　　}
　　　　　　
　　　　　let
　　　 reg = /r(\d+)c(\d+),/ig,
　　table = document.querySelector ('#abc'),
　hash = location.hash,
mark = /^#cls$/i.exec (hash) ? '': getStorage ('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';
　　　　　　　　
　　　　　　　　　setStorage ('MARK', mark);
　　　　　　　　　　
　　　　　　　　　　</script>
--
c.html
--
<!DOCTYPE html>
<title>c.html</title>
　<meta charset="utf-8">
　　
　　　 <style>
　　　　　td {
　　　　　　 width:5em;
　　　　　　　　}
　　　　　　　　　</style>
　　　　　　　　　　
　　　　　　　　　　<body>
　　　　　　　　　　<p>
　　　　　　　　　<input
　　　　　　　　type="button"
　　　　　　 value="r1c2"
　　　　　onclick="location.href='b.html#'+this.value;"
　　　 >
　　<input
　type="button"
value="cls"
onclick="location.href='b.html#'+this.value;"
>
　</p>
　　<table border="1">
　　　 <caption>
　　　　　表をクリックしてもOK
　　　　　　 <tbody>
　　　　　　　　<tr>
　　　　　　　　　<td>A <td>B <td>C <td>D
　　　　　　　　　　<tr>
　　　　　　　　　　<td>E <td>F <td>G <td>H
　　　　　　　　　　</table>
　　　　　　　　　
　　　　　　　　<script>
　　　　　　 document
　　　　　.addEventListener (
　　　 'click',
　　({target:e}) =>
　'TD' == e.tagName
? location.href = [
'b.html#',
'r' + e.parentNode.rowIndex,
　'c' + e.cellIndex
　　].join ('')
　　　 : null
　　　　　, false);
　　　　　　 </script>

- 0
- 件

通報する

この回答へのお礼

babu_babu_babooさま、こんにちは。この度もご丁寧なご回答をいただきありがとうございました。
質問内容に説明不足な点があり申し訳ありませんでした。現在制作しておりますプログラムですが、web上で簡単な問題を解かせるためのwebラーニング的なものです。自分のPC上にZAMPPでサーバーを立てここに製作したweb問題のページをアップしております。図で提示しましたようにBページのテーブルの各セルはAページやCページなど問題ページにリンクしております。Aページの問題を解き正解するとBページの問題テーブル上のAページのセルの背景色が赤くなるようにしたいと考えております。問題解答を終了するときにはファイル.htmlを付けてphpのバッファリングを使って、このページを保存するのですが、サーバーに保存して、再びファイル.htmlを呼び出すとBページの問題テーブル上のAページのセルの背景色が元の状態に戻ってしまっていました。これを解消したく保存するときにwebストレージを使ってBページの状態を保持したいと考えたのですが他に何か良い方法がありましたらお教えいただきたいと思います。宜しくお願いいたします。

通報する

お礼日時：2018/01/30 11:44

No.1

回答者： babu_babu_baboo
回答日時：2018/01/30 00:10

＞BページをPHPでバッファリングをして保存する

もっとぐたいてきにせつめいすべ。

いったいさーばーがわに、なにをほぞんしてるか？
さーばーがわでの、こじんのとくていほうほうは？
BぺーじはPHPがわで、かいてるの？
webすとれーじって、ろーかるかんきょうがわだよ？
さーばーがわでしょりしているのだったら
ろーかるかんきょうにでーたをおくいみがない

--
何となくこうなることは想像していたのだけれど・・・
前回の質問も締めきらずに・・・