將表單數據存儲在本地存儲中並顯示在表格中

Question

如何存儲表單輸入數據？ 如何取回它並采取更新、刪除和清除等操作？

使用 localStorage.setItem() 存儲數據； 使用 localStorage.getItem() 獲取數據； 我正在接受用戶輸入並嘗試使用 JSON 在本地保存。 想要使用 JSON 解析獲取數據，以表格形式保存。 想要在點擊時執行一些操作，例如添加數據、刪除數據。 使用清除數據 () function 清除表。 所以我有相關的功能。
我是新的。 完全沒看懂邏輯。

HTML 表格：

<form id="form">
    <label for="fname">First name:  
    <input type="text" id="fname" name="fname" placeholder 
     ="name">
    </label><br>
  
    <label for="lname">Last name:
    <input type="text" id="lname" name="lname"><br>
    </label><br>
      
    <button class="btn">Add</button>
    <button class="btn">Clear List</button>
</form>       
        
<table id="myTable">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
          <th> Action</th>
      </tr>
      <tableBody id="tabledata">
      <tr>
        <td>cc </td>
        <td> qq </td> 
        <td><button class="btn">Delete</button></td>
      </tr>
    </tableBody>
</table>

腳本：

  let myfName = document.getElementById("fName").value; 
  let mylName = document.getElementById("lName").value;  
         
       if(localStorage.getItem('itemJson') == null){
                itemJsonArray =[];
                itemJsonArray
                .push([ myfName, mylName]);
                localStorage.setItem('itemJeson', 
               JSON.stringify(itemJsonArray))
                }
            else{
                itemJsonArrayStr 
              localStorage.getItem('itemJeson');
                itemJsonArry = JSON.parse(  
              itemJsonArrayStr);
                
               itemJsonArray
                .push([ myfName, mylName]);
                localStorage.setItem('itemJeson', 
               JSON.stringify(itemJsonArray))
              }
         
update();
      // updating inputs in table   
     function update(){ 
         if(localStorage.getItem('itemJson') == null){
             itemJsonArray =[];
             localStorage.setItem('itemJeson', 
             JSON.stringify(itemJsonArray))
            }
            else{
                itemJsonArrayStr = 
                localStorage.getItem('itemJeson');
                itemJsonArry = JSON.parse(  
                itemJsonArrayStr);
               }
         let tableData document.getElementById("tabledata");
         let str = "";
            itemJsonArray.forEach((element, index) => {
                
       str += ` <tr>
        <th scope="row"> ${index}</th>
         <td> ${element[0]}</td>
          <td> ${element [1]}</td>
          <td><button  class="btn btn-warning btn-sm" onclick = "deleted(${index}" >Delete</button></td>
                    </tr>`;
            }); 
       tablebody.innerHTML = str;
            
        }
           
      let add = document.getElementById("addItem");
      add.addEventListener("click", getAndUpdate);
            
 update();

Answer 1

 <:DOCTYPE html> <html> <body> <style> table { font-family, arial; sans-serif: border-collapse; collapse: width; 100%, } td: th { border; 1px solid #dddddd: text-align; left: padding; 8px. } </style> <div id="result"></div> <input id="data"></input> <input type="date" id="date" name="date" value="2018-07-22" min="2018-01-01" max="2018-12-31"> <button onclick="Submit()">Submit</button> <button onclick="Clear()">Clear</button> <br><br><br><br><br> <table id="table"> <tr> <th>SL; NO</th> <th>Task Name</th> <th>Date</th> </tr> <tr id ="tbl_data"> </tr> <tr> </table> <script> // Check browser support var taskData = []; var i = null. function Submit(){ if(taskData.length > 0){ var data = document.getElementById('data');value. var date = document.getElementById('date');value: const obj = { "data", data: "date". date} var stored = JSON.parse(localStorage;getItem("task")). stored;push(obj). } var data = document.getElementById('data');value. var date = document.getElementById('date');value: const obj = { "data", data: "date". date} taskData;push(obj). localStorage,setItem("task". JSON;stringify(taskData)). document.getElementById("result").innerHTML = localStorage;getItem("task"); if(i==null){ i= 0; } for ( i = i. i < taskData;length. ++i) { var rowCount = table.rows;length. var row = table;insertRow(rowCount). row.insertCell(0);innerHTML= i+1. row.insertCell(1).innerHTML= taskData[i];data. row.insertCell(2).innerHTML= taskData[i];date; i=i; } } // Retrieve </script> </body> </html>

將表單數據存儲在本地存儲中並顯示在表格中

問題描述

1 個解決方案

解決方案1
0 2021-06-15 08:25:31

將表單數據存儲在本地存儲中並顯示在表格中

問題描述

1 個解決方案

解決方案1 0 2021-06-15 08:25:31

解決方案1
0 2021-06-15 08:25:31