表題の通りテーブルに追加した項目全てidを追加してローカルストレージで登録・保存・削除を操作したいです。テーブルに項目は追加できるのですがそれをidを付け加えることができなく、また追加したものをどうローカルストレージに保存や呼び出しをできるかがわかりません。どうかご教授願います。
現在のコードは
function coladd1() {
var table = document.getElementById("table");
// 行を行末に追加
var row = table.insertRow(-1);
//td分追加
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
var cell6 = row.insertCell(-1);
var cell7 = row.insertCell(-1);
var cell8 = row.insertCell(-1);
var cell9 = row.insertCell(-1);
// セルの内容入力
cell1.innerHTML = '<input type="date")">';
cell2.innerHTML = '<input type="date")">';
cell3.innerHTML = '';
cell4.innerHTML = '<input type="date")">';
cell5.innerHTML = '<input type="number")">';
cell6.innerHTML = '<input type="number")">';
cell7.innerHTML = '';
cell8.innerHTML = '';
cell9.innerHTML = '<input type="button" style="background-color:red" value=削除 id="coladd" onclick="coldel(this)">'; //削除ボタン
}
No.5ベストアンサー
- 回答日時:
列の内容をレコードオブジェクトに変換しましょう。
例) レコード = { id:列のid値, name:列のname入力値, ... };
id値は画面入力する必要はないので属性値として持ちましょう。
例) <tr data-id="..."> <td><input name="name"> ... </tr>
複数レコードを配列データにまとめましょう。
例) データ = [ 1レコード, 2レコード, ... ];
配列データを JSON 文字列にしてストレージ読み書きしましょう。
例)
localStorage.setItem("テーブル名", JSON.stringify(データ));
データ = JSON.parse( localStorage.getItem("テーブル名") );
新しい列を作るときは、既存データから新しいidを計算しましょう。
例)
データ = ローカルストレージから読み出し();
新しいid = データ.reduce((p,v) => (p > v.id)? p: v.id+1, 0);
列を削るときは、既存データから特定idのレコードだけ除外しましょう。
例)
データ = ローカルストレージから呼び出し();
データ = データ.filter(v => v.id != 特定id);
ローカルストレージに保存(データ);
ありがとうございます。
初心者で勉強不足でご提示いただいたもので理解ができていませんが配列に入れ込む…。なんとかわかりそうな…。勉強致します。
No.4
- 回答日時:
<!DOCTYPE html>
<title></title>
<meta charset="utf-8">
<style>
td output {
display: inline-block;
width: 8em;
text-align: right;
}
</style>
<body>
<table border="1">
<caption>質問者へのお年玉</caption>
<thead>
<tr><th>A <th>B <th>C <th>D <th>E
</thead>
<tbody id="hoge">
<template>
<tr>
<td><input name="a">
<td><input name="b" type="number" value="1">
<td><input name="c" type="number">
<td><output name="d"></output>
<td><button value="del">Delete</button>
</tr>
</template>
<tr>
<th colspan="4">
<th><button value="ins">Insert</button>
</tr>
</tbody>
</table>
<script>
const TARGET_ID = 'hoge';
function func0 () {
let
table = document.getElementById (TARGET_ID),
templ = table.querySelector ('template'),
data = JSON.parse (localStorage.getItem (TARGET_ID)) || [];
for (let rec of data) {
let
clone = templ.content.cloneNode (true),
items = [...clone.querySelectorAll ('*[name]')].reduce ((a, b)=> a.set (b.name, b), new Map);
for (let [name, val] of Object.entries (rec)) {
if (items.has (name))
items.get (name).value = val == null ? '': val;
}
table.insertBefore (clone, templ);
}
}
function func1 (e) {
let
table = document.getElementById (TARGET_ID),
templ = table.querySelector ('template'),
clone = templ.content.cloneNode (true),
tr = e.closest ('tr') || clone;
tr.parentNode.insertBefore (clone, templ);
}
function func2 (button) {
let tr = button.closest ('tr');
if (tr)
tr.remove ();
}
function func3 () {
let
table = document.getElementById (TARGET_ID),
trs = table.querySelectorAll ('tr:not(template>tr)'),
data = [ ];
for (let tr of trs) {
let cols = tr.querySelectorAll ('*[name]');
if (cols.length)
data.push ([...cols].reduce ((a, b)=> (a[b.name] = b.value, a), { }));
}
localStorage.setItem (TARGET_ID, JSON.stringify(data));
}
function func4 (e) {
let
tr = e.closest ('tr'),
inp = [...tr.querySelectorAll ('*[name]')].reduce ((a, b)=> (a[b.name] = b, a), { });
inp['d'].value = (+inp.b.value * +inp.c.value).toLocaleString ();
}
function handler (event) {
let e = event.target;
switch (event.type) {
case 'click':
switch (true) {
case e.matches ('button[value="ins"]'): func1 (e); func3 (); break;
case e.matches ('button[value="del"]'): func2 (e); func3 (); break;
}
break;
case 'input':
if (e.matches ('td input[name]')) {
func4 (e);
func3 ();
}
break;
}
}
//____________
func0 ();
hoge.addEventListener ('click', handler, false);
hoge.addEventListener ('input', handler, true);
//もう class で書くべきだった
</script>
ありがとうございます。ご丁寧にコードをいただきありがとうございます。またお年玉とは本当にありがとうございます。
参考に自分のものと合わせていただきます。
No.3
- 回答日時:
・・・・unction savadd1( key )のkeyとは全ての項目を指すのですか?・・・・・・・・
localStorage で使われる、key そのもののことです。
よくわからないなら、まずこちらをご参考に↓
https://www.tohoho-web.com/html5/web_storage.html
https://kurage.ready.jp/jhp_g/html5/fileR_W.html
No.2
- 回答日時:
djtriple さん
・・・・ローカルストレージで登録・保存・削除を操作したい・・・・・・・
具体的にどうしたいのかよく分かりませんが、ご参考に↓
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<button id="coladd1" onclick="coladd1()">追加1</button>
<button id="savadd1" onclick="savadd1('add1')">保存1</button>
<button id="revadd1" onclick="revadd1('add1')">再生1</button>
<table border="1" id="table"></table>
<script>
var tablev = document.getElementById("table");
function coladd1() {
// 行を行末に追加
var row = tablev.insertRow(-1);
//td分追加
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);
var cell4 = row.insertCell(-1);
var cell5 = row.insertCell(-1);
var cell6 = row.insertCell(-1);
var cell7 = row.insertCell(-1);
var cell8 = row.insertCell(-1);
var cell9 = row.insertCell(-1);
// セルの内容入力
cell1.innerHTML = '<input type="date">';
cell2.innerHTML = '<input type="date">';
cell3.innerHTML = '';
cell4.innerHTML = '<input type="date">';
cell5.innerHTML = '<input type="number">';
cell6.innerHTML = '<input type="number">';
cell7.innerHTML = '';
cell8.innerHTML = '';
cell9.innerHTML = '<input type="button" style="background-color:red" value="削除" onclick="coldel(this)">'; //削除ボタン id 削除
}
function coldel(thisId){
thisId.parentNode.parentNode.innerHTML ="";
}
function savadd1( key ){
let inHt = tablev.innerHTML;
localStorage.setItem(key, inHt);
}
function revadd1( key ){
let inHt = localStorage.getItem( key ); // キーの値を取得
tablev.innerHTML = inHt;
}
</script>
</body>
</html>
No.1
- 回答日時:
こんにちは
>テーブルに項目は追加できるのですがそれをidを付け加えることができなく
「項目」というのはセル要素(=td要素)のことで良いのでしょうか?
もしそうなら、生成した際にID属性を付与しておけば良いです。
例えば、cell2に"hoge2"というidを付与するなら
cell2.setAttribute('id', 'hoge2');
のような要領です。
https://developer.mozilla.org/ja/docs/Web/API/El …
ドット表記やブラケット表記を利用して
cell2.id = 'hoge2';
cell2['id'] = 'hoge2';
としても同様のことが可能です。
読み取る際も同様に
cell2.getAttribute('id')
cell2.id
cell2['id']
などとすることで、当該属性を取得できます。
※ id属性は、文書中で一意であることが求められていますので、値の生成には何らかのルールが必要になるものと思われます。
(全体像が不明なので、よくわかりませんけれど・・)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) エクセルの数式で教えてください。 1 2023/07/31 15:49
- Excel(エクセル) Excel 、この式はどのように解釈すればいいのでしょうか 4 2023/02/03 08:53
- JavaScript gasについて 1 2022/05/31 21:51
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- その他(プログラミング・Web制作) pythonにおける単方向リストの実装について 4 2022/07/13 12:34
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- Excel(エクセル) B列に文字がはいったらA列に数字が入るマクロードを完成させたい 4 2023/04/21 01:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
クリックされたセルの位置を取得するには?
JavaScript
-
htmlの文字が縦書きになる
HTML・CSS
-
javascriptで作成されたテーブルの値を取得したい
JavaScript
-
-
4
至急!GetElementById でtdのidの値を取得、サブウインドに取得したデータを表示
JavaScript
-
5
一覧から選択した行の行番号を取得について
JavaScript
-
6
チェックボックス付きのテーブルから、チェックの付いた行のみの値を取得したい
JavaScript
-
7
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
googleスプレッドシートのApps ...
-
シンプルなweb版スタンプラリー...
-
テーブルセル内のinput要素のna...
-
ドラッグでセルを選択した後に
-
特定のclassを表示、非表示にする
-
google apps scriptの終了のさせ方
-
正規表現について質問です。条...
-
C#で、ContextMenuStripに動的...
-
C# 演算 分岐処理 繰り返し処理
-
javaScriptのコードの修正をお...
-
ローカルにあるファイルを検索...
-
Jscriptからのオープン
-
javaScript textareaの一行あた...
-
gas スプレッドシートがアクテ...
-
VSCODE[Python]の設定について
-
メールフォームの日付入力フォ...
-
翌月を取得するGASが分かりません
-
javascriptカウントタイマー設...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は?
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
1日1回引けるJavaScriptおみく...
-
javascriptでテーブルに追加し...
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
JavaScriptで文字列の特定文字...
-
アクセス時からのカウントダウ...
-
ローカルにあるファイルを検索...
おすすめ情報