Hướng dẫn how to store form data in table using javascript - cách lưu trữ dữ liệu biểu mẫu trong bảng bằng javascript

Lưu trữ dữ liệu trong trình duyệt với JavaScript.

setItem (khóa, giá trị) Lưu trữ khóa/giá trị ..

getItem (khóa) nhận được giá trị theo khóa ..

• RemoveItem (khóa) Xóa khóa và giá trị ..
• Rõ ràng () Xóa mọi thứ khỏi lưu trữ ..
• khóa (chỉ mục) Nhận khóa từ một vị trí nhất định ..

Chiều dài số lượng các mặt hàng được lưu trữ ..
It was a entry level role so the interviewer asked me to create a table and show the details that are submitted by the user in a table format.

Junaid

Đăng vào ngày 25 tháng 7 năm 2021 • Cập nhật vào ngày 28 tháng 8 năm 2021
The things that you have to do include:-

• Bài viết này sẽ tập trung vào:-
• Cách lấy dữ liệu từ thẻ đầu vào
• Cách hiển thị dữ liệu đó cho người dùng trên cùng một trang web bằng JS

Làm thế nào để làm tất cả những điều trên trên biểu mẫu gửi.

  

    Email
    
    Age
    
    State
    
    Submit
  
 

   
Name
   
Age
   
State
 

Nhập chế độ FullScreenen EXIT Mode FullScreen

Này tất cả mọi người, vì vậy câu hỏi này đã được hỏi tôi trong một cuộc phỏng vấn gần đây cho vai trò trước mà tôi đã nộp đơn. Đó là một vai trò cấp nhập cảnh vì vậy người phỏng vấn đã yêu cầu tôi tạo một bảng và hiển thị các chi tiết được gửi bởi người dùng ở định dạng bảng.

• Vậy hãy bắt đầu
• Điều đầu tiên bạn cần hiểu là tuyên bố vấn đề trong tay. Những điều bạn phải làm bao gồm:-
• Tạo một biểu mẫu bằng HTML & CSS.

Chúng ta có thể cải thiện giao diện của hình thức bằng cách sử dụng một số CSS

form{
  display:flex;
  flex-direction:column;
  width:35vw;
}
form input{
  padding:0.7em 1em;
}
form span{
  padding:0.6em 1em;
}
form > button{
  padding:1.1em;
  margin:1em 1em;
  cursor:pointer;
}
ul{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  justify-content:center;
  width:25vw;

}
ul li{
  padding:1em 2em .8em 2em;
  border:1px solid black;

}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Vì vậy, kiểu dáng được thực hiện bây giờ là phần JavaScript.
Now comes the javascript part.

Vì vậy, những điều bạn cần làm trong JavaScript bao gồm *Nhận tài liệu tham khảo cho tất cả các đầu vào cũng như cho biểu mẫu.
*Get references for all the inputs as well as for the form.

• Đặt trình nghe sự kiện cho sự kiện gửi biểu mẫu.submit event of the form.
• Và sau đó lấy các giá trị một sự kiện được kích hoạt và hiển thị nó với giao diện người dùng. Vậy hãy bắt đầu.

let form=document.getElementById("formSubmission");

let table=document.getElementById('data');
form.addEventListener("submit",(e)=>{
  e.preventDefault();
  submit();
})


const submit=()=>{
  let name = document.getElementById("name").value;
    let age = document.getElementById("age").value;
    let state = document.getElementById("state").value;


  let newArray = [name,age,state];
  newArray.forEach((item)=>{
      var li = document.createElement("li");
  var text = document.createTextNode(item);
  li.appendChild(text);
  table.appendChild(li);
  })
  form.reset(); 
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

• Vì vậy, kiểu dáng được thực hiện bây giờ là phần JavaScript.
• Vì vậy, những điều bạn cần làm trong JavaScript bao gồm *Nhận tài liệu tham khảo cho tất cả các đầu vào cũng như cho biểu mẫu.
• Đặt trình nghe sự kiện cho sự kiện gửi biểu mẫu.
• Và sau đó lấy các giá trị một sự kiện được kích hoạt và hiển thị nó với giao diện người dùng. Vậy hãy bắt đầu.
• Ở đây bạn có thể thấy chúng tôi có tham chiếu đến biểu mẫu và bảng của chúng tôi trước.li
• Sau đó, chúng tôi đã thêm trình nghe sự kiện để nhận sự kiện gửi và bất cứ khi nào điều đó xảy ra, hãy gọi chức năng ** của chúng tôi **.
• Sau đó, chúng tôi tiếp tục và nối nút văn bản vào LI của chúng tôi mà chúng tôi vừa tạo
• Sau đó, chúng tôi nối LI vào bảng của chúng tôi.

Điều này xảy ra cho tất cả các đầu vào và sau khi thực hiện, biểu mẫu sẽ được đặt lại bằng phương thức .Reset () đã tồn tại

Và kết quả cuối cùng sẽ trông như thế này

À chính nó đấy. Tôi chắc chắn sẽ có nhiều cách tốt hơn để làm điều đó. Nếu bạn biết bất kỳ bình luận nào khác dưới đây để cho tôi biết.
I am sure there will be many more better ways of doing it.
If you know any other do comment below to let me know.

Thanks.

Muốn khuyến khích tôi tạo những bài đăng như thế này nhiều hơn hãy mua cho tôi một ly cà phê
Buy me a coffee