Question

我是javascript的新手，所以我没有那么多想法，这是最好的方式。

这是我的HTML代码：

<!doctype html>
<html lang="en">
<html>
<head>
<title>System Links</title>
<link rel="stylesheet" type="text/css" href="graphics.css" />
<script type="text/javascript" src="Brain.js"></script>
</head>
<body>
<h1 id="hello">Test-Page-Production</h1>
<div id="button2" ><a href="FrontPage.html">Production</a></div>
<div id="button2"><a href="SecondPage.html">NonProduction</a></div>


<table id= "Hello" style="height:;width:100%; position: absolute; top: 200px; bottom: 0; left: 0; right: 0;border:1px solid" >
  <thead>
    <tr>
    <th>CheckBox</th>
    <th>Host</th>
    <th>SID</th>
    <th>NR</th>
    <th>SCS</th>
    <th>Type</th>
    <th>URL</th>
    <th>SAP Components</th>
    </tr>
  </thead>
  <tbody>
    <tr >
    <td><INPUT type="checkbox" name="chk"/></td>
    <td>Host Name</td>
    <td>SID</td>
    <td>4</td>
    <td>17</td>
    <td>ABAP</td>
    <td><a href="https://www.facebook.com/">Links</a></td>
    <td>HanaSystem</td></tr>

    <tr>
    <td><INPUT type="checkbox" name="chk"/></td>
    <td>Host Name</td>
    <td>SID</td>
    <td>4</td>
    <td>17</td>
    <td>ABAP</td>
    <td>Links</td>
    <td>HanaSystem</td>
    </tr>


    <tr>
    <td><INPUT type="checkbox" name="chk"/></td>
    <td>Host Name</td>
    <td>SID</td>
    <td>4</td>
    <td>17</td>
    <td>ABAP</td>
    <td>Links</td>
    <td>HanaSystem</td>
    </tr>
  </tbody>
</table>

<button id="add" onClick="addRow()">
Add Row</button>


<button id="delete" onClick="deleteCell()">
Delete Row</button>

</body>
</html>


This is my javascript code:

function addRow()
{

var Host=prompt("Enter Host Name");  
var SID=prompt("Enter System ID"); 
var NR=prompt("Enter the NRsd:");
var SystemNumber=prompt("Enter System Number"); 
var Type=prompt("Enter the Type"); 
var URL=prompt("Enter the URL"); 
var SystemComponents=prompt("Enter the System Components");

               //tableBody=document.getElementsByTagName("tbody").item(0);
               var tableBody = document.getElementById('Hello').getElementsByTagName('tbody')[0];
               //row=document.createElement("tr");   
               var row   = tableBody.insertRow(tableBody.rows.length);


               var newCell0 =row.insertCell(0);
               var cb = document.createElement('input');
               var cb=document.createElement('input');
               cb.type = 'checkbox';
               newCell0.appendChild(cb);


               // Insert a cell in the row at index 0
               var newCell  = row.insertCell(1);
               // Append a text node to the cell
               var newText  = document.createTextNode(Host);
               newCell.appendChild(newText);


               // Insert a cell in the row at index 0
               var newCell1  = row.insertCell(2);
               // Append a text node to the cell
               var newText1  = document.createTextNode(SID);
               newCell1.appendChild(newText1);



               // Insert a cell in the row at index 0
               var newCell2  = row.insertCell(3);
               // Append a text node to the cell
               var newText2  = document.createTextNode(NR);
               newCell2.appendChild(newText2);




               // Insert a cell in the row at index 0
               var newCell3  = row.insertCell(4);
               // Append a text node to the cell
               var newText3  = document.createTextNode(SystemNumber);
               newCell3.appendChild(newText3);



               // Insert a cell in the row at index 0
               var newCell4  = row.insertCell(5);
               // Append a text node to the cell
               var newText4  = document.createTextNode(Type);
               newCell4.appendChild(newText4);



               // Insert a cell in the row at index 0
               var newCell5 = row.insertCell(6);
               // Append a text node to the cell
               var newText5  = document.createTextNode(URL);
               newCell5.appendChild(newText5);


               // Insert a cell in the row at index 0
               var newCell6= row.insertCell(7);
               // Append a text node to the cell
               var newText6  = document.createTextNode(SystemComponents);
               newCell6.appendChild(newText6);

}

function deleteCell(){


//var tableBody = document.getElementById('Hello').getElementsByTagName('tbody')[0];
//document.getElementById('Hello').getElementsByTagName('tbody').deleteRow(4);

 //var confirmation=window.confirm("Are you sure you want to delete");

var tableBody = document.getElementById('Hello').getElementsByTagName('tbody')[0];
var confirmation=window.confirm("Are you sure you want to delete");
var rowCount = tableBody.rows.length;
if(confirmation==true){
for(var i=0;i<rowCount;i++){
    var row = tableBody.rows[i];
    var chkbox = row.cells[0].childNodes[0];
    if(null != chkbox && true == chkbox.checked) {
                    tableBody.deleteRow(i);
                    rowCount--;
                    i--;
                }
}
}


}

每当用户按下addrow按钮时，数据应该被保存。那么如何以最精确的方式实现这一点。因为在我的情况下，当用户点击刷新按钮时，页面会在没有保存任何数据的情况下从启动时再次刷新。

Answer 1

您可以将数据存储在浏览器的localStorage或sessionStorage中。

1）单击“添加”按钮后，将localStorage / sessionStorage保存为日期。 2）页面重新加载后，从localStorage / sessionStorage检索数据并通过javascript填充表。

要保存项目： sessionStorage.setItem（＆＃39; key＆＃39;，＆＃39; value＆＃39;）;

检索项目 var data = sessionStorage.getItem（＆＃39; key＆＃39;）;

API参考在这里： https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

刷新页面时如何在HTML外部保存数据？

1 个答案: