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">問題1</a></td>
<td id="td02"><a href="localhost/mondai_2.html">問題2</a></td>
<td id="td03"><a href="localhost/mondai_3.html" >問題3</a></td>
・・・・・・・・・・・・・・・・・</tr>
</tr>
</tbody>
</table>
サンプルでお示しいただきました方法を使って、この表の背景色を変える方法をお教えいただきたい
のですが、お力添えを宜しくお願いいたします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
ローカルストレージはつかいこなせないので。
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>
babu_babu_babooさん。この度は、ご回答いただきありがとうございました。
お示しいただきましたプログラムを参考に現在作成しているwebページに利用してみたいと思います。ありがとうございました。
No.1
- 回答日時:
こんにちは
残念ながら、断片情報を示されてもほとんどわかりません。
前の回答
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を利用なさる方が賢明かも知れませんね。(情報量がそれほど多くはなさそうに感じますので)
※ ついでながら、ここは一般に解放された質問掲示板なので、個人に対する質問はマナー違反になりそうな気がしますし、回答者を限定したところで、質問者様が得をすることはまったくないと思います。
※ 前回の質問などの経緯や情報がわかるようにしておけば、他の方の回答が得られるかもしれませんよ。(整理した情報を提供できならば、前回を引用する必要はありませんけれど)
fujillinさん、早速のご回答ありがとうございました。また、個人的な質問をしてしまい申し訳ありませんでした。質問内容に不備が多く的を得た質問内容を示すことができず混乱をさせてしまい申し訳ありませんでした。ご迷惑をおかけいたしました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
至急!GetElementById でtdの...
-
クリックされた罫表セルの行番...
-
チェックボックスにチェックが...
-
ハイパーリンクを別ウインドウ...
-
javascriptで指定するtrを削除...
-
データバインドで生成したテー...
-
テキストだけonCllickを検知したい
-
一覧から選択した行の行番号を...
-
▲▲JavaScriptに詳しい人見てく...
-
表内の列や行の結合に関して
-
slickのレスポンシブ > center...
-
フォームの値が0だったら空白...
-
return trueとreturn falseの用...
-
自動的に連番生成したURLにリン...
-
ドロップダウンリストの値の足...
-
XMLHttpRequestを利用してPHPへ...
-
FormのonsubmitでJavaスクリプ...
-
フィールドを有効(enabled?)に...
-
Javascriptの"return "について
-
objectのindex値って取れますか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
プルダウンで選択すると、DBの...
-
【UWSC】HTML内のある部分を抽...
-
tableの任意行にfocusをあてる
-
至急!GetElementById でtdの...
-
一覧から選択した行の行番号を...
-
マウスをブラウザの外に出した...
-
Selenium.ChromeDriverの使い方...
-
「オブジェクトは、このプロパ...
-
リンク色の変更
-
スクロールバーの表示位置を変...
-
テーブルで複数行をまとめて非...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
-
JavaScriptでテーブルの行入れ替え
-
テーブル内に表示されている数...
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
おすすめ情報