-2
私はjavascriptを初めて使っています。だから私はそれほど良いアイデアはありません。ページを更新するときに外部でHTMLにデータを保存する方法は？
これは私のHTMLコードです：ユーザが更新ボタンをクリックするwhenverどのように私の場合は最も正確way.Sinceでこれを達成するためにsaved.Soを取得する必要のAddRowボタンデータを押すたび
<!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--;
}
}
}
}
ページは再びデータを保存せずに開始からリフレッシュされます。
。ページを更新するたびに、サーバーは変更されていない同じデータを返します。サーバーに要求を送信し、そこに変更を保存する必要があります。 –
あなたの質問は「外部からデータを保存する」です。そのため、クライアントのHTMLページに永続データを保存することはできません。それを外部に保管する方法についてのアドバイスが必要ですか？もしそうなら、その質問はおそらく広すぎるとして閉じられるでしょう。使用しているサーバー側の技術（ある場合）に関する詳細情報を提供できますか？ – SeanOB
javascript ajaxを使用して 'json'データをサーバーに送信し（バックエンドコード）、そこでデータを保持します。ポストバックを使用して、新しいデータを確認またはロードし、それに従ってHTMLマークアップを更新することができます。 – ThatAwesomeCoder