回答編集履歴

1 追記

s8_chu

s8_chu score 14261

2017/01/04 11:23  投稿

[id属性はユニーク](http://affiliate.ks-product.com/html_id_class_howto/)でなければなりません。
今回の場合は、```<input id=\"k\" type=\"text\" value=" + k + ">```を見るとわかるように、**各フォームに1つずつkというid属性が設定されている**ため、上のようにid属性を設定する方法と,```var k = document.getElementById("k").value;```は間違いだということがわかると思います。
以上のことから、コードはこんな感じになると思います。
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset=utf-8>
   <title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title>
</head>
<body>
<script>
   var storage = localStorage;
   var result = "";
   var items = {
       data1: "data2",
       data3: "data4"
   };
   function addItem() {//setItem用関数
       Object.keys(items).forEach(function (key) {
           storage.setItem(key, items[key]);
       });
   }
   function dataDelete(key) {
       alert(key);
       storage.removeItem(key);
   }
   window.onload = function () {
       for (var i = 0; i < storage.length; i++) {
           var k = storage.key(i);
           result += "<form name='js'>" +
               "<table border='1' cellspacing='0' cellpadding='0'>" +
               "<tr>" +
               "<td width='100'>" +
               k +
               "</td>" +
               "<td width='200'>" +
               storage.getItem(k) +
               "</td>" +
               "<td width='100'>" +
               "<input id='k" + i + "' type='text' value='" + k + "'>" +
               "<input type='submit' value='削除' onclick='dataDelete(\"" + k + "\")'>" +
               "</td>" +
               "</tr>" +
               "</table>" +
               "</form>";
       }
       document.getElementById("show_result").innerHTML = result;
   };
</script>
<div id="show_result"></div>
</body>
</html>
```
また、今回の質問内容とはあまり関係ありませんが、HTMLの書き方が少しおかしいと感じる部分がありましたので、下に書いておきます。
- tableタグの中にdivタグが存在する。
- pタグの中にtableタグが存在する。
- pタグの中にtableタグが存在する。
追記
---
```HTML
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset=utf-8>
   <title>Web Storageの中身を一覧表示してsubmitボタンで選んだものを削除</title>
</head>
<body>
<script>
   var storage = localStorage;
   var result = "";
   var items = {
       data1: "data2",
       data3: "data4"
   };
   function addItem() {//setItem用関数
       Object.keys(items).forEach(function (key) {
           storage.setItem(key, items[key]);
       });
   }
   function dataDelete(key) {
       alert(key);
       storage.removeItem(key);
   }
   function dataChange(key, changeKey) {
       dataChangeText = document.getElementById(changeKey).value;
       if (window.confirm(localStorage[key] + "を" + dataChangeText + "に変更します。")) {
           localStorage[key] = dataChangeText;
       }
   }
   window.onload = function () {
       for (var i = 0; i < storage.length; i++) {
           var k = storage.key(i);
           result += "<form name='js'>" +
               "<table border='1' cellspacing='0' cellpadding='0'>" +
               "<tr>" +
               "<td width='100'>" +
               k +
               "</td>" +
               "<td width='200'>" +
               storage.getItem(k) +
               "</td>" +
               "<td width='100'>" +
               "<input id='k" + i + "' type='text' value='" + k + "'>" +
               "<input type='submit' value='削除' onclick='dataDelete(\"" + k + "\")'>" +
               "<input id='change_k" + i + "' type='text' value='" + localStorage[k] + "'>" +
               "<input type='submit' value='変更' onclick='dataChange(\"" + k + "\", \"change_k" + i + "\")'>" +
               "</td>" +
               "</tr>" +
               "</table>" +
               "</form>";
       }
       document.getElementById("show_result").innerHTML = result;
   };
</script>
<div id="show_result"></div>
</body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る