アプリ版：「スタンプのみでお礼する」機能のリリースについて

javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい

解決済

  • 質問者：djtriple
  • 質問日時：
  • 回答数：5件

表題の通りテーブルに追加した項目全て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)">';　//削除ボタン

}

通報する

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

列の内容をレコードオブジェクトに変換しましょう。


例) レコード = { 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);
ローカルストレージに保存(データ);
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
初心者で勉強不足でご提示いただいたもので理解ができていませんが配列に入れ込む…。なんとかわかりそうな…。勉強致します。

通報する
お礼日時：2023/01/05 20:21

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。ご丁寧にコードをいただきありがとうございます。またお年玉とは本当にありがとうございます。
参考に自分のものと合わせていただきます。

通報する
お礼日時：2023/01/05 20:17

No.3

  • 回答者： gura_
  • 回答日時：

････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
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます。勉強致します。

通報する
お礼日時：2023/01/05 20:14

No.2

  • 回答者： gura_
  • 回答日時：

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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
function savadd1( key )のkeyとは全ての項目を指すのですか？

通報する
お礼日時：2023/01/04 04:14

No.1

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

こんにちは



＞テーブルに項目は追加できるのですがそれを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属性は、文書中で一意であることが求められていますので、値の生成には何らかのルールが必要になるものと思われます。
（全体像が不明なので、よくわかりませんけれど・・）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
cell2.setAttribute('id', 'hoge2');というものを使ってみます。

通報する
お礼日時：2023/01/03 16:52

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

Q質問する（無料）

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

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

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

Q質問する（無料）

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

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

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

おすすめ情報