ローカルストレージについて～表作成～

html
1<html>
2<head>
3    <meta charset="utf-8"/>
4
5
6
7<script type="text/javascript">
8                
9                //保存
10                function taouroku1() {
11                   　　　　　　　　
12　　　　　　　　　　var table = document.getElementById("table");
13　　　　　　　       
14     　　　　　　   var row = table.insertRow(-1);
15  　　　　　　      
16       　　　　　　 var cell1 = row.insertCell(-1);
17      　　　　　　  var cell2 = row.insertCell(-1);
18
19  　　　　　　      
20  　　　　　 cell1.innerHTML = '<input type="number" id="" size="40" min="0.5" max="20" value="5" step="0.1">';
21            cell2.innerHTML = '<input type="number" id="" size="40" min="0.5" max="20" value="5" step="0.1">';
22            cell3.innerHTML = '<input type="button" value="登録" onclick="touroku1()">';
23            cell4.innerHTML = '<input type="button" value="削除" onclick="delete1()">';
24        }
25                }
26
27
28               //削除
29               function delete1() {
30                     box.removeChild(p);
31                }
32            </script>
33  </head>
34
35<body>
36
37//表のフォーマット
38<td><input type="text" value="" onclick="memo1"></td>
39                                <td id=""><input type="number" id="tourokutate1" size="40" min="0.5" max="20" value="5" step="0.1"> </td>
40                                <td id=""><input type="number" id="tourokuyoko1" size="40" min="0.5" max="20" value="5" step="0.1"></td>
41                                <td><input type="button" value="登録" onclick="touroku1()"></td>
42                                <td><input type="button" value="削除" onclick="delete1()"></td>
43
44</body>
45
46</html>
47
48

ローカルストレージを利用して表に入力したものを保存し、行を追加したり削除したりできるようしたいです。

例えば、テキスト、数値､数値を入力し、登録ボタンを押すと、表に追加されローカルストレージ保存し、保存し追加された表の削除ボタンを押すと消される仕組みを作りたいです。　

登録ボタンを押したとき、保存するのと同時に新しい入力項目が出るようにしたいのですが、表がでてきません。コピペ繰り返していて、どこかidなど変更忘れもあるかと思いますが、わかる方いらっしゃいましたら、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

個々の箇所は数行なので、理解できるでしょう
面倒なのでコメントは無し。
一か所の変更でも表全体を取得しているので効率は悪い。

不要だと思いますが、tbody を増やすことも可能です。

js
1<!DOCTYPE hrml>
2<meta charset="UTF-8">
3<title></title>
4<style>
5tbody tr:first-of-type { display: none; }
6table input[type="number"] { text-align: right; }
7</style>
8
9<body>
10<table border="1">
11  <thead>
12    <tr><th>Text <th>num1 <th>num2 <th>add <th>del
13  <tbody id="hoge">
14    <tr>
15      <td><input type="text">
16      <td><input type="number" size="40" min="0.5" max="20" value="5" step="0.1">
17      <td><input type="number" size="40" min="0.5" max="20" value="5" step="0.1">
18      <td><button>登録</button>
19      <td><button>削除</button>
20</table>
21
22
23<script>
24
25class MemoTable {
26  //css で tbody の最初の行を非表示にすること
27
28  static create (tbody) {
29    let that = new this (tbody);
30    tbody.addEventListener ('click', that, false);
31    return that.reload ();
32  }
33
34
35  constructor (target, name = target.id) {
36    this.target = target;
37    this.name = name;
38  }
39
40  reload () {
41    this.table = JSON.parse (localStorage[this.name] || '[]');
42    return this;
43  }
44
45    
46  register () {
47    localStorage[this.name] = JSON.stringify (this.table);
48    return this;
49  }
50
51
52  delete (tr) {
53    tr.remove ();
54    return this.register ();
55  }
56
57
58  newRec () {
59    this.target.appendChild (this.target.rows[0].cloneNode (true));
60    return this;
61  }
62
63
64  handleEvent (event) {
65    let e = event.target;
66
67    if ('BUTTON' === e.nodeName)
68      if (this.target === e.closest ('tbody')) {
69        let
70          tr = e.closest ('tr'),
71          isLast = tr === this.target.rows[this.target.rows.length - 1];
72
73        switch (e.textContent) {
74
75        case '登録' :
76          ! isLast || this.newRec ();
77          this.register ();
78          break;
79
80        case '削除' :
81          isLast || this.delete (tr);
82          break;
83        }
84      }
85  }
86
87
88  set table (data) {
89    let
90      [o, ..._] = this.target.rows,
91      c = o.cloneNode (true),
92      i = [...c.querySelectorAll ('input')],
93      def = i.map (a=> a.value)
94    ;
95    
96    _.forEach (e=> e.remove ());
97    for (let d of [...data, def]) {
98      i.forEach ((a, b)=> a.value = d[b] || '');
99      this.target.appendChild (c.cloneNode (true));
100    }
101  }
102
103
104  get table () {
105    return [...this.target.rows].slice (1, -1).reduce ((a, b)=> [...a, [...b.querySelectorAll ('input')].map (a=> a.value)] , []);
106  }
107
108}
109
110
111//_______________________
112
113
114MemoTable.create (hoge);
115
116</script>
117