如何在我的表中打印json对象？ [英] how to print json object in my table?
问题描述
我正在尝试打印包含我的inputName字段和我的inputDate字段的对象。我成功地将两个变量存储到我的localStorage中，但我无法将其打印在我的表中。我证明了一个更好理解的图景。我试图使用console.log，但它不会在控制台中打印任何内容。我想我不知道如何使用控制台日志。
我想要做的事情如下：一旦用户输入名称和日期，我想成为能够显示这些值到我的表。
y）？1：0））;}）;} / *此函数将我的输入保存到本地存储* / function getInput （）; var nameInput = document.getElementById（'inputName'）。 dateInpu t）;}函数SubmitInput（）{var JsObject = []; var nameInput = document.getElementById（'inputName'）.value; var dateInput = document.getElementById（'inputDate'）.value; if（localStorage.getItem（' JsObject.push（{'inputName'：nameInput，'inputDate'：dateInput}）; localStorage.setItem（'datastorage'，JSON。字符串化（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 ++）{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;边界崩溃：崩溃; 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> <的第i;姓名< /第> <的第i;日期和LT; /第> <的第i;背书< /第> < / 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>< /表> < form class =form-horizontal> <字段集> <图例>赞同我< / legend> < div class =form-group> < label class =col-lg-2 control-label> Name< / label> < div class =col-lg-10> < input onCLick =getInput（）type =textclass =form-controlid =inputNameplaceholder =Name> < / DIV> < / DIV> < div class =form-group> < label class =col-lg-2 control-label>日期< / label> < div class =col-lg-10> < input onCLick =getInput（）type =textclass =form-controlid =inputDateplaceholder =Date> < / DIV> < / DIV> < div class =form-group> < div class =col-lg-10 col-lg-offset-2> < button onClick =SubmitInput（）type =submitclass =btn btn-primary>提交< / button> < / DIV> < / DIV> < / fieldset>< / form>< / head>< script> $（document）.ready（function（）{$（'。dropdown-toggle'）。dropdown（）;}）;脚本>< / body>< / html>
试试这个：
< html>< style> table {font -samily：arial，sans-serif;边界崩溃：崩溃; width：100％;} td，th {border：1px solid #dddddd; text-align：left; padding：8px;} tr：nth-child（偶数）{background-color：#dddddd;}< / style>< head> <！ - < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> - >< / head>< body>< table id =myTable> < /表> < form class =form-horizontal> <字段集> <图例>赞同我< / legend> < div class =form-group> < label class =col-lg-2 control-label> Name< / label> < div class =col-lg-10> < input onCLick =getInput（）type =textclass =form-controlid =inputNameplaceholder =Name> < / DIV> < / DIV> < div class =form-group> < label class =col-lg-2 control-label>日期< / label> < div class =col-lg-10> < input onCLick =getInput（）type =textclass =form-controlid =inputDateplaceholder =Date> < / DIV> < / DIV> < div class =form-group> < div class =col-lg-10 col-lg-offset-2> < button onClick =SubmitInput（）type =submitclass =btn btn-primary>提交< / button> < / DIV> < / DIV> < / fieldset>< / form>< script> $（document）.ready（function（）{$（'。dropdown-toggle'）。dropdown（）;}）;< / script>< html>
I am trying to print my object that holds my inputName field and my inputDate field. I am successfully storing both variables onto my localStorage but I am unable to print it in my table. I am proving a picture to a better understanding. I tried to use console.log but It doesn't print anything in the console. I guess I do not know how to use console log.
What I am trying to do is the following : once an user inputs a name and date, I want to be able to display those values to my table.
function SortByKey(array,key){
return array.sort(function(a,b){
var x = a[key];
var y = b[key];
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) {
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++) {
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>
Try This:
function SortByKey(array,key){
return array.sort(function(a,b){
var x = a[key];
var y = b[key];
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) {
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++) {
/*
document.getElementById('myTable').innerHTML += "<tr>" + "<td>" + JsObject[i].nameInput + "</td>" + "<td>" + JsObject[i].dateInput + "</td>" + "</tr>"; */
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + JsObject[i].nameInput + "</td>");
tr.append("<td>" + JsObject[i].dateInput + "</td>");
tr.append("<td>" + next_variable + "</td>");
$('myTable').append(tr);
}
//console.log(JsObject);
}
<html>
<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>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
</head>
<body>
<table id="myTable" >
</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>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</html>
这篇关于如何在我的表中打印json对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
