Tạo bảng cho vòng lặp javascript

Chúng tôi sẽ thêm một thuộc tính mới { “1” } với giá trị của nó là một mảng [“name”, “text-danger”]. Chỉ mục đầu tiên của mảng là cột cần thiết cho đầu bảng và chỉ mục thứ hai là lớp CSS của cột đó

tbodyData

Đối tượng này chứa các cột cần thiết cho thân bảng

Cấu trúc gần giống như cấu trúc ở trên, ngoại trừ việc bạn sẽ phải thêm nhiều giá trị hơn tùy thuộc vào các cột đầu bảng

bảngLớp học

Biến này giữ ClassList của bảng của chúng tôi. Bạn có thể tách nhiều lớp bằng một khoảng trắng

Bước 2. Tạo một chức năng để tạo một bảng

Trong hàm của chúng ta, chúng ta cần chỉ định một biến cục bộ t mà chúng ta sẽ sử dụng trong một vòng lặp

Bây giờ chúng tôi sẽ sử dụng document.createElement(), để tạo các phần tử cần thiết trong bảng của chúng tôi

Bây giờ chúng ta cần lặp qua dữ liệu đầu bảng được cung cấp trong biến theadData và nối từng phần dữ liệu bên trong đầu bảng của chúng ta. Đối với điều này, chúng tôi sẽ sử dụng biến t mà chúng tôi đã tạo trước đó

Vòng lặp của chúng tôi sẽ kiểm tra độ dài của dữ liệu thead được cung cấp, sau đó nó sẽ truy cập các thuộc tính và giá trị của nó, đồng thời tạo một hàng của bảng với một dữ liệu bảng duy nhất từ ​​vòng lặp của chúng tôi, bên trong nó

Bên trong vòng lặp, chúng ta sẽ sử dụng phương thức appendChild() để nối tất cả các phần tử được tìm thấy trong table head > table row với cha của nó là table row

Sau khi vòng lặp kết thúc, chúng ta sẽ nối hàng của bảng với phần tử cha của nó là đầu bảng thead

Ghi chú. Tôi đã sử dụng [“name”, “text-danger”]0 để truy xuất độ dài của Đối tượng [“name”, “text-danger”]1 của chúng tôi. Đây là một phương pháp đã biết để truy cập độ dài của một đối tượng

Cho đến nay, cấu trúc bảng HTML của chúng ta sẽ trông như thế này

Bước 3. Tạo thân bảng

Lý do tại sao đầu bảng rất dễ hoàn thành là bởi vì, trong một bảng ngang, các đầu bảng sẽ chứa tối đa một hàng cho tất cả các cột

Điều này không giống như phần thân bảng, nơi bạn sẽ cần kiểm tra số lượng bản ghi được cung cấp trước khi có thể tạo hàng cho dữ liệu đó

Nói cách khác, phần đầu thường sẽ có 1 hàng, nhưng phần thân có thể có vô số hàng

Như hình bên dưới ta có 2 hàng ghi 2 bản ghi khác nhau. Vì vậy, chúng ta phải kiểm tra chính xác, số lượng bản ghi mà chúng ta đang xử lý, sau đó tạo một hàng cho từng bản ghi

Bước 4. Lặp qua dữ liệu

Bên trong vòng lặp thứ hai, chúng ta cần một vòng lặp khác sẽ duyệt lại các bản ghi và nối các giá trị của từng thuộc tính vào phần tử bảng body > table data (td)

Bạn có thể nhận thấy rằng tôi đã tạo một đối tượng mới [“name”, “text-danger”]2. Điều này sẽ chứa tất cả dữ liệu bảng của phần tử (_______13) cần thiết cho thân bảng > hàng của bảng (tr)

Vẫn bên trong vòng lặp này, chúng ta sẽ tạo phần tử dữ liệu bảng [“name”, “text-danger”]3 và sau đó lưu trữ nó trong đối tượng [“name”, “text-danger”]5. Vì chúng ta có thể tham chiếu đến một thuộc tính trong đối tượng này dưới dạng Nút, nên chúng ta có thể trực tiếp nối giá trị của mình vào thuộc tính này bằng cách sử dụng phương thức [“name”, “text-danger”]6, sau đó nối thuộc tính đó vào thân bảng > hàng của bảng

Sau vòng lặp này, chúng tôi sẽ nối tất cả các phần tử được tìm thấy bên trong thân bảng > hàng của bảng vào thân bảng

Bước 5. Nối thead và tbody vào bảng của chúng tôi

Chúng tôi đã thành công trong việc tạo các phần tử bảng dưới đây

• bảng > thead > tr > td
• bảng > tbody > tr > td

Bây giờ là lúc nối thêm thead và [“name”, “text-danger”]8 vào bảng của chúng ta và sau đó cung cấp phần tử mà chúng ta nên nối thêm bảng của mình vào

Và đó là nó. Chúng tôi đã xây dựng thành công chức năng 'Trình tạo bảng ngang'

Hãy kiểm tra nó trong bảng điều khiển của chúng tôi với dữ liệu mẫu bên dưới

Trước khi chúng tôi có thể nối thêm bảng của mình, chúng tôi cần tạo một phần tử có id [“name”, “text-danger”]9

Tôi sẽ sao chép mã bên dưới và dán trực tiếp vào bảng điều khiển của một trang trống nơi tôi đã tạo một phần tử có id [“name”, “text-danger”]9

nó hoạt động

Ghi chú. Tôi đã thêm một số kiểu dáng CSS nhỏ vào bảng của mình. Bạn có thể thấy một thiết kế khác khi bạn chạy thiết kế của mình

Và bây giờ bạn đã thiết lập và chạy, bạn có thể đi và sửa đổi chức năng cho phù hợp với nhu cầu của mình

Xây dựng các ứng dụng web có thể kết hợp

Đừng xây dựng web nguyên khối. Sử dụng Bit để tạo và soạn các thành phần phần mềm tách rời — trong các khung yêu thích của bạn như React hoặc Node. Xây dựng giao diện người dùng và phụ trợ có thể mở rộng với trải nghiệm nhà phát triển mạnh mẽ và thú vị

Đưa nhóm của bạn đến Bit Cloud để lưu trữ và cộng tác trên các thành phần cùng nhau, đồng thời tăng tốc, mở rộng quy mô và chuẩn hóa đáng kể quá trình phát triển theo nhóm. Bắt đầu với các giao diện người dùng có thể kết hợp như Hệ thống thiết kế hoặc Giao diện vi mô hoặc khám phá phần phụ trợ có thể kết hợp. Hãy thử nó →