Làm cách nào để hiển thị dữ liệu động trong bảng HTML bằng JavaScript?
Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách tạo Bảng động trong HTML khi chạy bằng JavaScript Các cột, hàng và ô sẽ được tạo động trong Bảng bằng JavaScript Show
Đánh dấu HTML Đánh dấu HTML sau bao gồm Nút HTML và phần tử DIV HTML. Nút HTML đã được chỉ định một trình xử lý sự kiện OnClick gọi hàm JavaScript GenerateTable <đầu vào loại="nút" giá trị<="Generate Table" onclick="GenerateTable()" /> <giờ /> <div id="dvTable">div>
Hàm JavaScript để tạo Bảng động trong HTML khi chạy Bên trong hàm GenerateTable JavaScript, đầu tiên một Mảng JSON được tạo. Mảng JSON chứa các giá trị Tiêu đề và Ô của Bảng Bảng HTML Đầu tiên, một Bảng HTML động được tạo bằng phương thức JavaScript createElement
Thêm hàng tiêu đề Hàng Tiêu đề sẽ được tạo bằng cách sử dụng phần tử đầu tiên của Mảng vì nó chứa các giá trị văn bản của cột Tiêu đề Đầu tiên, một hàng được chèn vào Bảng và sau đó sử dụng số lượng cột, một vòng lặp được thực thi và từng phần tử của Bảng TH được tạo bằng phương thức createElement Phương pháp chèn bảng. Phương thức này thêm một hàng mới vào Bảng tại chỉ mục đã chỉ định. Nếu chỉ mục được cung cấp là -1 thì hàng sẽ được thêm vào vị trí cuối cùng.
Thêm hàng dữ liệu Một vòng lặp được thực hiện trên các phần tử mảng và từng Hàng một được tạo trong Bảng HTML. Sau đó, bên trong mỗi Hàng, một Ô được thêm vào bằng phương thức Bảng chènCell Phương thức chèn hàng của bảng. Phương thức này thêm một ô mới vào Hàng của Bảng tại chỉ mục đã chỉ định. Nếu chỉ mục được cung cấp là -1 thì hàng sẽ được thêm vào vị trí cuối cùng.
Thêm Bảng động vào Trang Cuối cùng, bảng được tạo động được thêm vào trang bằng cách thêm nó vào HTML DIV bằng phương thức appendChild Lưu ý. Bạn cũng có thể thêm một phần tử vào nội dung nhưng sau đó bạn sẽ không thể đặt vị trí của phần tử đó trên trang. Sử dụng một thùng chứa DIV như vậy giúp chúng ta thêm phần tử động vào nơi mong muốn. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp về cách thêm dữ liệu vào bảng HTML một cách linh hoạt bằng cách sử dụng JavaScript, đọc đầu vào từ người dùng sau khi gửi giá trị đã nhập được thêm vào bảng html bằng JavaScript JavaScript được các lập trình viên trên khắp thế giới sử dụng để tạo nội dung web động và tương tác như ứng dụng và trình duyệt và nó là ngôn ngữ lập trình phía máy khách Hướng dẫn từng bước về cách thêm dữ liệu vào bảng HTML một cách linh hoạt bằng JavaScript. -Trong html, chúng tôi đã tạo trường đầu vào để đọc đầu vào của người dùng và loại nút đầu vào được xác định để gửi When user after entered input clicks button it loads load() function by using ‘onclick’ event. In |