編集履歴

質問編集履歴

コード編集

2017/02/15 16:56

投稿

tai_chi

スコア15

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -23,88 +23,6 @@
 ###該当のソースコード
 ```HTML
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-    <meta charset="utf-8">
-    <title>localStorageのサンプル</title>
-    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
-    <!-- Latest compiled and minified CSS -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-<!-- Optional theme -->
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
-<!-- Latest compiled and minified JavaScript -->
-<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-</head>
-<body>
-<div id="form">
-<textarea id="text1" name="japanese" cols="40" rows="5"></textarea>
-<!--     <input id="text1" type="text" size="50"> -->
-    <input id="text2" type="text" size="50">
-    <input id="text3" type="text" size="50">
-</div>
-<input type="button" onClick="saveData()"  value="データ保存">
-<input type="button" onClick="readData()" value="データ読込">
-<input type="button" onClick="delData()" value="データ削除">
-	<p id="exp_Q"></p>
-	<p id="exp_A"></p>
-	<p id="exp_I"></p>
-    <p>単語：</p>
-    <p id="list_Q">ex</p>
-    <p id="list_A">ex</p>
-    <p id="list_I">ex</p>
-    <button id="next">進む</button>
@@ -141,134 +59,6 @@
-    var obj = {};
-    var x = 1;
-    function saveData() {
-        var text1 = $("#text1").val();
-        var text2 = $("#text2").val();
-        var text3 = $("#text3").val();
-        obj[x] = {
-            "english": text1,
-            "japanese": text2,
-            "info": text3
-        };
-        console.log(obj);
-        x = x + 1;
-        localStorage.setItem("data", JSON.stringify(obj));
-//        console.log(obj[1].english);
-        alert("a");
-    }
-    function readData() {
-        // オブジェクトに戻して取得
-        $("#exp_Q, #exp_A, #exp_I").empty();
-        var object = JSON.parse(localStorage.getItem("data"));
-        var keys = Object.keys(object);
-        for (var i = 0; i < Object.keys(object).length; i += 1) {
-            $("#exp_Q").append(keys[i] + ": " + object[keys[i]]['english'] + ", ");
-            $("#exp_A").append(keys[i] + ": " + object[keys[i]]['japanese'] + ", ");
-            $("#exp_I").append(keys[i] + ": " + object[keys[i]]['info'] + ", ");
-//            $("#list_I").html(object[Object.keys(object)[i]]['english']);
-        }
-    }
-    var i = 0;
-    var iMax = 0;
-    $('#next').on('click', function() {
-        //        //配列が最後まで行った後の処理
-//        if ( i == iMax ) { //===でも動く
-//            if(confirm('AGAIN？')){
-//                reset1();
-//            }
-//        }
-        var object = JSON.parse(localStorage.getItem("data"));
-        var keys = Object.keys(object);
-//        $('#list_I').text("sdss");
-        $('#list_Q').text(object[keys[i]]['english']);
-        $('#list_A').text(object[keys[i]]['japanese']);
-        $('#list_I').text(object[keys[i]]['info']);
-        console.log(object[keys[i]]['english']);
-        i++;
-	});
-    function reset1() {
-        $('#list_Q').text(object[keys[0]]['english']);
-        $('#list_A').text(object[keys[0]]['japanese']);
-        $('#list_I').text(object[keys[0]]['info']);
-        i = 0;
-    }
     function list(){
@@ -330,10 +120,6 @@
 </script>
-</body>
-</html>
 ```

function list\(\){}内の記述を変えました。

2017/02/15 16:56

投稿

tai_chi

スコア15

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -2,17 +2,17 @@
 JSON形式で登録した配列分だけ、
-一覧で表示したいと考えております。
+tableで表示したいと考えております。
 ###発生している問題・エラーメッセージ
-for文で回して、タグを作っていくのだろうと思い、
+tbodyにidをつけ、function list(){}で
-調べて似たようなコードを見つけました。
+tobody内にセルをつけるように記述しました。
-ただ、組み込もうと思っても、うまくいきません。
+ただ、undefinedのまま配列が取得されません。
@@ -108,65 +108,31 @@
-    <table id="listbox" class="table table-striped">
+    <table>
-    <thead>
+        <thead>
-        <tr>
+            <tr>
-            <th>No</th>
+                <th>No</th>
-            <th>English</th>
+                <th>English</th>
-            <th>Japanese</th>
+                <th>Japanese</th>
-            <th>Info</th>
+                <th>Info</th>
-        </tr>
+            </tr>
-    </thead>
+        </thead>
-    <tbody>
-        <tr>
-            <td>1</td>
-            <td>John</td>
-            <td>Carter</td>
-            <td>johncarter@mail.comaaaaaaaaaaaaaaaaaaa</td>
-        </tr>
-        <tr>
-            <td>2</td>
-            <td>Peter</td>
-            <td>Parker</td>
-            <td>p</td>
-        </tr>
-        <tr>
-            <td>3</td>
-            <td>John</td>
-            <td>Rambo</td>
+        <tbody id="listbox">
-            <td>j</td>
-        </tr>
-    </tbody>
+        </tbody>
-</table>
+    </table>
@@ -310,19 +276,33 @@
         var keys = Object.keys(object);
+        var a = "";
         for( var i=0, l=keys.length; i<l; i+=1) {
-             console.log(keys[i], object[ keys[i]] );
-             alert(object[keys[i]]['english'] + object[keys[i]]['japanese']  );
+            alert(object[keys[i]]['english']);
+            a += "<tr>\n";
+            for (j = 0; j < keys[i].length; j++) {
+                a += "<td>";
+                a += object[keys[i]][j];
+                a += "<td>\n";
-         }
+            }
+            a += "</tr>\n";
-     }
+        }
+        $("#listbox").append(a);
+    }
 //         var a = "";