2017-04-17 132 views
0

我会尽力在此处表达我的问题,即将表格数据保存在表格中的代码,但每次刷新页面时,值都会消失。这是一个与我们的家禽农场有关的表格,我希望这个表格应该有一个记录,最重要的是我想要一个删除按钮。在此先感谢..将表格数据永久保存在表格中

<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

您将需要将数据保存到数据库中 – nogad

+2

您需要学习PHP和MySQL。 –

+0

你可以告诉我如何使用它 – Pratik

回答

0

,因为你不是在维护或任何存储数据它将工作一次。你只是显示它。有多种方式来存储网络应用程序的数据。您可以使用浏览器或本地数据库。尽管后者是最标准的方法。

首先,您必须将这些值存储在数据库中,并通过服务器使用对该数据库的服务调用来访问它们。你无法单独使用javascript维护数据的状态。伊莫你需要首先掌握这些基本概念,如果你必须实现数据的状态维护。

您可以从阅读关于数据库服务器开始。为了实现这个目标,各种技术堆栈都可以使用和实现。你可以使用任何基本符合你需求的东西。

大多数情况下,一个简单的Web应用程序按此顺序工作。 (使用的技术可能会有所不同)。

数据库(SQL)< - >服务(Java)的< - >服务器(码头下,Tomcat等)< - >客户端(JavaScript中,AngularJS等)

请注意,上述流程是其中的许多方式实现UI - 数据库关系。有更好更有效的方法来达到目的,但我说的是最基本的方法。

因此,您需要对此流程有基本的了解,才能为您的Web应用程序实现数据存储/检索。

如果您不想使用DB,请参考此link。只需按照页面中给出的步骤操作即可,您将立即拥有自己的小型数据库。但是,如果您打算扩展您的应用程序,它将无济于事。