我将尝试在此处表达我的问题是将表单数据保存在表中的代码，但每当我刷新页面时，值都会消失plzz帮助。这是一个与我们的家禽养殖场有关的表格，我希望这个表格应该有记录最重要我也想要一个删除按钮。提前谢谢..
<html>
<head>
<title>Get Answer</title>
<script type="text/javascript" src="../tinymce/tinymce.min.js"></script>
<!--<script type="text/javascript">
tinymce.init({
selector: "#newcom",
auto_focus: "newcom",
skin: "xenmce",
width: 750,
height: 250,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor "
],
content_css: "css/content.css",
toolbar: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
]
});
</script> -->
</head>
<body><center>
<div>
<form name="firstform" id="firstform" method="post">
<p id="p1">
<label>Total Hens</label><input type="text" name="hen" id="hen" size="35" value="" />
</p>
<p id="p2">
<label>Total Eggs</label><input type="text" name="egg" id="egg" size="35" value="" />
</p><br>
<p id="p8">
<label>Total Cracked Eggs</label><input type="text" name="cegg" id="cegg" size="35" value="" />
</p><br>
<p id="p3">
<label>Rate</label><input type="text" name="rate" id="rate" size="35" value="" />
</p>
<p id="p4">
<label>Feed Sacks</label><input type="text" name="fs" id="fs" size="35" value="" />
</p>
<p id="p5">
<label>Week</label><input type="text" name="week" id="week" size="35" value="" />
</p>
<p id="p6">
<label>Death</label><input type="text" name="death" size="35" id="death" />
</p><br />
<input type="button" value="Save" id="button" onclick="writeToPage();" />
<input type="reset" value="Reset" id="button" />
</form>
</div></center>
<div id="pdada">
<table border="1" align="center">
<tr>
<th>Date and Time</th>
<th>Hens</th>
<th>Eggs</th>
<th>Cracked Eggs</th>
<th>Rate</th>
<th>Feed Sacks</th>
<th>Week</th>
<th>Death</th>
<th>Total Value of Perfect eggs</th>
<th>Total Value of Cracked eggs</th>
<th>Total Value including Perfect eggs and Cracked eggs</th>
</tr>
<tr>
<td id="adate"></td>
<td id="ahen"></td>
<td id="aegg"></td>
<td id="acegg"></td>
<td id="arate"></td>
<td id="afs"></td>
<td id="aweek"></td>
<td id="adeath"></td>
<td id="pe"></th>
<td id="ce"></th>
<td id="atv"></td>
</tr>
</table>
</div>
<script>
var dt = new Date();
function writeToPage(){
var hen = document.getElementById("hen").value;
var egg = document.getElementById("egg").value;
var cegg = document.getElementById("cegg").value;
var rate = document.getElementById("rate").value;
var fs = document.getElementById("fs").value;
var week = document.getElementById("week").value;
var death = document.getElementById("death").value;
var pe = ( egg * rate );
var ce = ( cegg * ( rate / 2 ) );
var tv = ( (egg * rate) + ( rate / 2 * cegg ) );
if(hen === ""){
alert("Please fill out the Hens field.");
document.getElementById("p1").style.color = "red";
document.getElementById("p1").style.fontFamily = "Arial";
document.getElementById("p1").style.fontSize = "larger";
}
else if(egg === ""){
alert("Please fill out the Eggs field.");
document.getElementById("p2").style.color = "red";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
}
else if(cegg === ""){
alert("Please fill out the Cracked Eggs field.");
document.getElementById("p8").style.color = "red";
document.getElementById("p8").style.fontFamily = "Arial";
document.getElementById("p8").style.fontSize = "larger";
}
else if(rate === ""){
alert("Please fill out the Rate field.");
document.getElementById("p3").style.color = "red";
document.getElementById("p3").style.fontFamily = "Arial";
document.getElementById("p3").style.fontSize = "larger";
}
else if(fs === ""){
alert("Please fill out Feed Sacks field.");
document.getElementById("p4").style.color = "red";
document.getElementById("p4").style.fontFamily = "Arial";
document.getElementById("p4").style.fontSize = "larger";
}
else if(week === ""){
alert("Please fill out the Week section.");
document.getElementById("p5").style.color = "red";
document.getElementById("p5").style.fontFamily = "Arial";
document.getElementById("p5").style.fontSize = "larger";
}
else if(death=== ""){
alert("Please fill out the Death section.");
document.getElementById("p6").style.color = "red";
document.getElementById("p6").style.fontFamily = "Arial";
document.getElementById("p6").style.fontSize = "larger";
}
else{
document.getElementById("adate").innerHTML = dt;
document.getElementById("ahen").innerHTML = hen;
document.getElementById("arate").innerHTML = rate;
document.getElementById("aegg").innerHTML = egg;
document.getElementById("acegg").innerHTML = cegg;
document.getElementById("afs").innerHTML = fs;
document.getElementById("aweek").innerHTML = week;
document.getElementById("adeath").innerHTML = death;
document.getElementById("pe").innerHTML = pe;
document.getElementById("ce").innerHTML = ce;
document.getElementById("atv").innerHTML = tv;
}
}
</script>
</body>
答案 0 :(得分：0)
它将工作一次，因为您没有在任何地方维护或存储数据。你只是在显示它。有各种方法来存储Web应用程序的数据。您可以使用浏览器或本地数据库。虽然后者是最标准的方式。
首先，您必须将这些值存储在数据库中，并通过服务器使用对该数据库的服务调用来访问它们。您无法单独使用javascript维护数据的状态。如果你必须实现数据的状态维护，你需要首先掌握这些基本概念。
您可以先阅读数据库和服务器。为了实现这一点，各种技术堆栈可用并且就位。您可以使用任何基本满足您需求的东西。
大多数情况下，简单的Web应用程序按此顺序工作。 （使用的技术可能会有所不同）。
数据库（SQL）＆lt; - ＆gt;服务（Java）＆lt; - ＆gt;服务器（Jetty，Tomcat等）＆lt; - ＆gt;客户端（Javascript，AngularJS等）
请注意，上述流程实现UI与数据库关系的众多方式之一。有更好，更有效的方法来达到目的，但我说的是最基本的方式。
因此，您需要对此流程有一个基本的了解，才能为您的Web应用程序实现数据存储/检索。
如果您不想使用数据库，请参阅此link。只需按照页面中给出的步骤操作，您就可以立即获得自己的小型数据库。但是，如果您计划扩展应用程序，它将无济于事。