我是 HTML/CSS/JS 的新手，我想知道如何從表單中獲取資訊并將其存盤在表格中。
例如，用戶將在表單中鍵入他們的姓名并按下創建按鈕。這將創建一個包含用戶名的表。但是，我也希望即使在重繪 選項卡后資料仍保留在表中。我相信這需要一個服務器。請指出我正確的方向。下面是我的 HTML，然后是我的 JS。
說明： 重繪 選項卡時，訪問該網站的其他人應該能夠看到用戶輸入的表中的資料。每次用戶在表上按回車鍵時，它應該添加一個新行而不洗掉前一行。
我相信我必須使用服務器，所以有人能告訴我如何將它與我想要做的事情結合起來使用嗎？謝謝！
HTML
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"<br>
</form>
JS
function refresh() {
var table = document.getElementById("infotable");
let row = table.insertRow(1);
let cell1 = row.insertCell(0);
cell1.innerHTML = document.getElementById("name").value;
}
uj5u.com熱心網友回復：
好吧，實際上您不需要服務器。您可以將資料保存在localStorage. 看看這個評論的例子：
const result = document.getElementById("result");
const saved = JSON.parse(localStorage.getItem("save")); // get saved items
if (saved) {
const t =
`<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Hobby</th>
</tr>
<tr>
<td>${saved.name}</td>
<td>${saved.age}</td>
<td>${saved.hobby}</td>
</tr>
</table>`;
result.innerHTML = t; // show the result
}
const form = document.getElementById("my-form"); // get the form element
form.addEventListener("submit", e => {
// detect once the submit button is clicked
e.preventDefault(); // Don't allow the form to redirect to another page
const {
elements
} = form; // Get input elements so we can retrieve their values
const output = {
name: elements.name.value, // get name
age: elements.age.value, // get age; the " " in front converts it to a number
hobby: elements.hobby.value // get hobby
};
localStorage.setItem("save", JSON.stringify(output)); // save output to localStorage
// Create a template
const template =
`<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Hobby</th>
</tr>
<tr>
<td>${output.name}</td>
<td>${output.age}</td>
<td>${output.hobby}</td>
</tr>
</table>`;
result.innerHTML = template; // show the result
});<form id="my-form">
<!-- some dummy inputs -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name...">
<br>
<label for="age">Age:</label>
<input type="number" id="age" name="age" placeholder="Enter your age...">
<br>
<label for="hobby">Hobby:</label>
<input type="text" id="hobby" name="hobby" placeholder="Enter your hobby...">
<br>
<input type="submit" />
</form>
<div id="result"></div>注意：localStorage 在上面的例子中不起作用，因為嵌入不允許它。
uj5u.com熱心網友回復：
如果您想要長期存盤，是的，您將需要使用某種帶有資料庫的后端解決方案。但是，還有其他選項，例如 cookie 和 localStorage。
由于安全限制，這不會在此處的片段中作業，但它會將用戶輸入保留在 localStorage 中，并在每次訪問頁面時顯示它們
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
<form onsubmit='do_fn()'>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"<br>
<button type='submit'>submit</button>
</form>
<div class='showname' hidden>Your name is <span></span></div>
<script>
function do_fn() {
localStorage.setItem('name', document.querySelector('#name').value);
}
// here is where you can detect it when they come back.
window.addEventListener('DOMContenetLoaded', function() {
let n = localStorage.getItem('name');
let d = document.querySelector('.showname')
if (n && n!='') {
d.removeAttribute('hidden');
d.querySelector('span').innerText = n;
}
})
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/371542.html
標籤：javascript html 形式