我是JavaScript新手,所以我沒有那麼多的想法,這是最好的方法。如何在刷新頁面時在HTML外部保存數據?
這是我的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數據應該得到saved.So如何在我的情況下,最精確的way.Since實現這一whenver用戶點擊刷新按鈕該頁面從頭開始再次刷新而不保存任何數據。
HTML是在客戶端。每當刷新頁面時,服務器都會返回相同的未更改數據。您需要向服務器發送請求並保存更改。 –
你的問題是'爲了外部保存數據',所以你必須知道你不能在客戶端HTML頁面擁有持久數據。你想要如何在外部存儲它的建議嗎?如果是這樣的話,這個問題可能會被過於寬泛地關閉。你能否提供更多關於你正在使用的服務器端技術的信息(如果有的話)? – SeanOB
使用javascript ajax將'json'數據發送到服務器(後端代碼)並將數據保存到那裏。您可以進行回傳來檢查或加載新數據並相應地更新您的HTML標記。 – ThatAwesomeCoder