0
inputNameフィールドとinputDateフィールドを保持するオブジェクトを印刷しようとしています。私は正常に両方の変数を自分のlocalStorageに格納していますが、テーブルにそれを印刷することができません。私はより良い理解に絵を証明しています。 console.logを使用しようとしましたが、コンソールに何も表示されません。私はコンソールログの使い方を知らないと思う。私のテーブルにjsonオブジェクトを印刷するには？
私がしようとしているのは、ユーザーが名前と日付を入力すると、それらの値をテーブルに表示できるようにしたいということです。
function SortByKey(array,key){
\t return array.sort(function(a,b){
\t var x = a[key];
\t var y = b[key];
\t return ((x<y)?-1:((x>y)?1:0));
});
}
/* This function will save my input onto Local Storage*/
function getInput(){
var nameInput = document.getElementById('inputName').value;
localStorage.setItem('Name', nameInput);
var dateInput = document.getElementById('inputDate').value;
localStorage.setItem('Date', dateInput);
}
function SubmitInput() {
var JsObject =[];
var nameInput = document.getElementById('inputName').value;
var dateInput = document.getElementById('inputDate').value;
if (localStorage.getItem('datastorage')!=undefined) {
\t var JsObject = JSON.parse(localStorage.datastorage);
}
JsObject.push({'inputName':nameInput, 'inputDate':dateInput});
localStorage.setItem('datastorage',JSON.stringify(JsObject));
//console.log(JsObject);
print();
}
function print(){
var JsObject = JSON.parse(localStorage.getItem('datastorage'));
var clean = " ";
document.getELementByID('myTable').inner.HTML=clean;
for (var i = 0; I < JsObject.length; i++) {
\t
document.getElementById('myTable').innerHTML += "<tr>" + "<td>" + JsObject[i].nameInput + "</td>" + "<td>" + JsObject[i].dateInput + "</td>" + "</tr>";
//console.log(JsObject);
}
}<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table id="myTable" >
<tr>
<th>Name</th>
<th>Date</th>
<th>Endorsement</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<form class="form-horizontal">
<fieldset>
<legend>Endorse me</legend>
<div class="form-group">
<label class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input onCLick ="getInput()" type="text" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-10">
<input onCLick="getInput()" type="text" class="form-control" id="inputDate" placeholder="Date">
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button onClick="SubmitInput()" type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</fieldset>
</form>
</head>
<script>
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
はサンプル 'JsObject'を与えるだけでなく – Arun
あなたが何を意味するのですか？私のコードにあるすべてのものです。 – crucl