在表中显示来自本地数据的信息
Posted
技术标签:
【中文标题】在表中显示来自本地数据的信息【英文标题】：Displaying information from local data in a table 【发布时间】：2022-01-04 23:26:41 【问题描述】：所以我有一个项目来创建一个网页，该网页在一个页面上接受用户输入并将其显示在另一个页面上的表格中。我知道至少有一些本地存储在工作，因为我调用了“textvalue”并且它总是让用户输入正确。我似乎无法弄清楚为什么我无法将数据显示在表格上。
这是我在获取用户输入并将其放入本地存储的页面所拥有的代码。
@page
@model RSVPModel
@
ViewData["Title"] = "RSVP";
<h1>@ViewData["Title"]</h1>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content=" width=device-width, initial-scale=1.0" />
<title>RSVP</title>
<link rel="stylesheet" type=" text/css" href="style.css" />
<script>
function getDetails()
var name = document.getElementById("name").value;
localStorage.setItem("textvalue", name);
var age = document.getElementById("age").value;
localStorage.setItem("agevalue", age);
var arrtime = document.getElementById("arrtime").value;
localStorage.setItem("timevalue", arrtime);
var parking = document.getElementById("parking").value;
localStorage.setItem("parkingvalue", parking);
return false;
if (!name || !age || !arrtime || !parking)
alert("Please fill all fields before proceeding");
return;
</script>
</head>
<body>
<div id=" container">
<div class=" input">Name: <input id="name" type="text" /></div>
<div class=" input">Age: <input id="age" type="number" /></div>
<div class=" input">Arrival Time: <input id="arrtime" type="time" /></div>
<label for="parking">Request Parking?</label>
<select name="parking" id="parking">
<option value=""></option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<form action="Submitted">
<input type="submit" id="submit" value="Submit RSVP" onclick="getDetails();"/>
</form>
</div>
</body>
</html>在输入页面点击提交按钮后，他们将进入感谢页面，他们可以通过页面上的链接或页面顶部的导航栏导航到表格页面。这是该页面的代码。
@page
@model SubmittedModel
@
ViewData["Title"] = "RSVP Submitted";
<body>
<div class="text-center">
<h1 class="display-4">Thank you <span id="result"></span>!</h1>
<p>It's great that you're coming. The drinks are already in the fridge!</p>
<p>Click <a href="GuestList">here</a> to see who is coming.</p>
</div>
<script>
document.getElementById("result").innerHTML = localStorage.getItem("textvalue");
</script>
</body>这是我的页面代码，它试图将其从本地存储中取出，将其分配给一个变量，然后将其显示在表格中。
@page
@model PrivacyModel
@
ViewData["Title"] = "Here is a list of people attending the party";
<h1>@ViewData["Title"]</h1>
<body>
<script>
var row = 1;
var submit = document.getElementById('submit');
submit.addEventListener("click", displayDetails);
function displayDetails()
document.getElementById("guestName").innerHTML = localStorage.getItem("textvalue");
document.getElementById("guestAge").innerHTML = localStorage.getItem("agevalue");
document.getElementById("arrivalTime").innerHTML = localStorage.getItem("timevalue");
document.getElementById("parkingRequest").innerHTML = localStorage.getItem("parkingvalue");
var display = document.getElementById("display");
var newRow = display.insertRow(row);
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
cell1.innerHTML = guestName;
cell2.innerHTML = guestAge;
cell3.innerHTML = arrivalTime;
cell4.innerHTML = parkingRequest;
row++;
</script>
<table id="display">
<tr>
<th>Name</th>
<th>Age</th>
<th>Arrival Time</th>
<th>Request Parking</th>
</tr>
</table>
</body>我真的找不到关于这样一个过程的任何信息，所以我试图将 3 个不同的教程拼凑在一起。我可能只需要一些新的眼光来发现一个简单的错误，或者我可能做错了。任何帮助将不胜感激。
【问题讨论】：
你能分享将用户从第一页带到第二页的代码吗？ 所以它不会将它们从输入页面带到表格页面。中间页面显示感谢您的回复。然后，他们可以从导航栏中的链接或感谢页面上的链接导航到包含表格的页面。我会在帖子中间张贴感谢页面。 【参考方案1】：我不确定你的代码发生了什么。如果下面的代码可以运行，也许你可以修改它。
<body>
<div>
<span>Test</span><input type="text" id="input_test" size="14" value="new">
</div>
<div>
<button type="button" id="save">Save</button>
</div>
<div>
<button type="button" id="load">Load</button>
</div>
<table id="table_test">
<tr>
<th>test</th>
</tr>
</table>
</body>
<script>
let save = document.getElementById('save');
save.addEventListener("click", saveDetails);
function saveDetails()
localStorage.setItem("Test", document.getElementById('input_test').value);
let load = document.getElementById('load');
load.addEventListener("click", loadDetails);
function loadDetails()
let t = document.getElementById('table_test');
let r = t.insertRow(1);
let c = r.insertCell(0);
c.innerHTML = localStorage.getItem("Test");
</script>
【讨论】：
以上是关于在表中显示来自本地数据的信息的主要内容，如果未能解决你的问题，请参考以下文章