Hướng dẫn show array in table javascript - hiển thị mảng trong bảng javascript

Chào mừng bạn đến với một hướng dẫn của người mới bắt đầu về cách tạo một bảng từ một mảng với JavaScript. Cần hiển thị một mảng dữ liệu tốt đẹp của người Viking trong HTML?

Tạo một bảng từ một mảng dễ dàng như sử dụng một vòng lặp để chạy qua mảng và tạo HTML:

• var mytable = "";
  for (var CELL of ARRAY) {  mytable += "
  "; }
  mytable += "

  " + CELL + "

  ";
• document.getElementById("ID").innerHTML = mytable;

Vâng, nó đơn giản. Nhưng chúng ta hãy đi qua một ví dụ thực tế về cách làm điều đó - đọc tiếp!

Tôi đã bao gồm một tệp zip với tất cả các mã ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ mọi thứ hoặc nếu bạn chỉ muốn đi thẳng vào.

Slide nhanh

MỤC LỤC

Tải xuống & ghi chú

Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.

Ghi chú nhanh

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.

Mã hóa ví dụ Tải xuống

Nhấn vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.

Được rồi, bây giờ chúng ta hãy vào các ví dụ về việc biến một mảng thành một bảng trong JavaScript.

Phương pháp 1) Chuỗi bảng HTML

1-html-string.html

Đúng, chuyển đổi một mảng thành một mảng thành bảng A & nbsp; dễ như vậy.

1. Đầu tiên, tất cả những gì chúng ta cần cho HTML là
   để tạo bảng.
2. Thuyền trưởng rõ ràng để giải cứu, một loạt dữ liệu.
3. Tiếp theo, chúng tôi lặp qua mảng và tạo một chuỗi HTML . Có, HTML về cơ bản chỉ là văn bản và tất cả những gì chúng ta cần là nối tất cả dữ liệu vào các ô HTML - .
   Cuối cùng, chúng tôi đặt chuỗi HTML hoàn chỉnh vào container, và đó là tất cả cho nó!

   Phương pháp 2) Tạo phần tử bảng

   2-create-element.html

   0
   Thêm một hàng mới vào bảng -

   1
   Thêm các ô vào hàng -

   2
   Nối dữ liệu vào ô -

   3

   Các bạn đã quen với OOP nên rất thoải mái với điều này.

   KẾT QUẢ

   Chúng ta nên sử dụng cái nào?

   Chà, cả hai phương thức của String String và các phương thức đối tượng và các phương thức đều hoạt động độc đáo. Nhưng một số ninja mã chủ troll rực lửa có thể sẽ khởi động một sự ồn ào lớn và khăng khăng rằng chúng ta phải làm theo cách hướng đối tượng-vì nó trông có vẻ tiên tiến hơn và chuyên nghiệp.

   Tôi sẽ không tranh luận với điều đó và cũng giới thiệu nó. Cách hướng đối tượng để tạo các yếu tố chỉ là sạch hơn rất nhiều, mà không phải viết tất cả các thẻ HTML thủ công đó. Tuy nhiên, không có gì sai khi viết chuỗi HTML và chèn chúng vào container HT HTML là văn bản đơn giản trong thực tế.

   Kiểm tra khả năng tương thích

   • Hàm mũi tên & nbsp; ________ 14 & nbsp; - Caniuse
   • Mẫu chữ
     5 - Caniuse
   • Mảng cho mỗi - Caniuse

   Chuẩn rồi. Một số tốc ký tiện lợi của người Viking không được hỗ trợ trong các trình duyệt cổ đại. Hãy cẩn thận khi sử dụng chúng.

   Tóm tắt - các chức năng DOM bạn nên biết

   ${DATA}

   Hàm số	Sự mô tả	liên kết tham khảo
   6	Nhận phần tử cho ID đã cho.	Bấm vào đây
   7	Tạo một phần tử DOM mới.	Bấm vào đây
   7	Tạo một phần tử DOM mới.	Bấm vào đây
   7	Tạo một phần tử DOM mới.	Bấm vào đây
   7	Tạo một phần tử DOM mới.	Bấm vào đây

   7

   Tạo một phần tử DOM mới.

   
   8

   Nối các đối tượng đã cho vào phần tử được chỉ định.

   9