Question

我正在尝试打印包含inputName字段和inputDate字段的对象。我成功地将两个变量存储到我的localStorage，但我无法在我的表中打印它。我正在证明一幅更好理解的画面。我试图使用console.log，但它没有在控制台中打印任何东西。我想我不知道如何使用控制台日志。

我要做的是以下内容：一旦用户输入名称和日期，我希望能够将这些值显示在我的表格中。

＆＃13;

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);
    

}



}

＆＃13;

<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>

＆＃13;

Answer 1

试试这个：

＆＃13;

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);
    




}

＆＃13;

<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>

＆＃13;

如何在我的表中打印json对象？

1 个答案: