如何從表格中獲取信息並將 append 獲取到表格中？

Question

我正在制作一個網站，我需要從表格中獲取信息並將其存儲在其他人都可以看到的表格中。

例如，每次有人填寫表格並按“提交”時，用戶都會被帶到另一個創建表格的頁面。 該表將 append 用戶剛剛輸入的信息。 如果選項卡被刷新或其他人訪問該站點，則表中的信息仍然存在。

我相信我需要一台服務器，所以如果有關於如何使用服務器的任何指導，將不勝感激。 -有關於此的評論，現在我需要回答以下問題

但是，更具體地說，我希望至少能夠使用本地存儲來找出保存數據並將其保存在至少一個用戶的表中的技術。

我下面有一些代碼正在嘗試使用本地存儲，但它目前無法正常工作。 我在其他地方有一個表格，我也在另一個頁面中調用了 div myresult。 任何幫助深表感謝。 謝謝！

function refresh() {
    const result = document.getElementById("myresult");
    const saved = JSON.parse(localStorage.getItem("save"));
    if (saved) {
        const t =
        `<table>
            <tr>
                <th>Name</th>
                <th>LastName</th>
            </tr>
            <tr>
                <td>${saved.name}</td>
                <td>${saved.lastname}</td>
            </tr>
        </table>`;

        myresult.innerHTML = t;
    }

    const form = document.getElementById("myform");
    form.addEventListener("submit", e => {
        e.preventDefault(); 
        const {
            elements
        } = form;
        const output = {
            name: elements.name.value, 
            lastname: elements.lastname.value,
        };
        localStorage.setItem("save", JSON.stringify(output));
        const template =
            `<table>
            <tr>
                <th>Name</th>
                <th>LastName</th>
            </tr>
            <tr>
                <td>${output.name}</td>
                <td>${output.lastname}</td>
            </tr>
        </table>`;
        myresult.innerHTML = template;
    })
}

Answer 1

這里的主要問題是您對form元素的使用。 假設您的表單具有以下樣式：

<form id="myform">
  <input placeholder="Name">
  <input placeholder="LastName">

  <input type="submit">
</form>

當您使用 JavaScript 選擇器 select 時，您首先執行以下操作：

const {
    elements
} = form;

試試console.log()元素是什么，你可能會注意到元素看起來可能與你的代碼假設的有點不同。 當你console.log() （這顯示在瀏覽器控制台中，你可以使用右鍵單擊，檢查元素，找到名為console的選項卡），響應將如下所示：

{
    0: <input placeholder="Name">,
    1: <input placeholder="LastName">,
    2: <input type="submit">
}

那里可能還有其他一些 JavaScript 行話，但這是肉。 當你這樣做時：

const output = {
    name: elements.name.value, 
    lastname: elements.lastname.value,
};

在名為name或lastname的elements object 內部沒有值。 相反，它是0和1 。 所以我們改變 output 的方式是：

const output = {
    name: elements[0].value, 
    lastname: elements[1].value,
};

這與訪問數組不同，因為我們正在訪問0和1的鍵s 處的elements 。 最后一步是將其添加到您的代碼中。 我冒昧地刪除了半重復的代碼（您在其中創建 HTML 並將其添加到頁面中），因為您所要做的就是從表單提交偵聽器中調用refresh() ，然后當它再次檢查時，您然后會從概念上了解本地存儲是如何工作的。 注意：如果你在 HTML 監聽器中調用刷新，監聽器不應該在refresh function 中，因為它只會拍打第二個監聽器，這意味着下次你嘗試提交它時會嘗試提交多次！

以下是這些更新后代碼的樣子。 請注意，該代碼在 StackOverflow 代碼片段中不起作用，因為無法訪問本地存儲。 如果你想簡單測試一下，我建議使用codepen.io ，它可以讓你輕松運行 HTML、CSS 和 JS 以及訪問本地存儲。

 function refresh() { const result = document.getElementById("myresult"); const saved = JSON.parse(localStorage.getItem("save")); if (saved) { const t = `<table> <tr> <th>Name</th> <th>LastName</th> </tr> <tr> <td>${saved.name}</td> <td>${saved.lastname}</td> </tr> </table>`; myresult.innerHTML = t; } } const form = document.getElementById("myform"); form.addEventListener("submit", e => { e.preventDefault(); const { elements } = form; console.log(elements); const output = { name: elements[0].value, lastname: elements[1].value, }; console.log(output); localStorage.setItem("save", JSON.stringify(output)); refresh(); })

 /* CSS to help with displaying the table*/ table, th, td { border: 1px solid black; } th, td { color: black; }

 <form id="myform"> <input placeholder="Name"> <input placeholder="LastName"> <br> <input type="submit"> </form> <div id="myresult">I added the div element here, but myresult may be a different tag than this</div>