Quick Blurb: Generating a Table from an Array in JavaScript

https://medium.com/wdstack/quick-blurb-generating-a-table-from-an-array-in-javascript-41386fd449a9

Giới thiệu nhanh: Tạo bảng từ một mảng trong Javascript

Nhiều người thường quên rằng bản thân Vanilla JS đã có khá nhiều sức mạnh. Bạn thực sự không cần các thư viện như Angular, React hoặc ngay cả JQuery cho mọi dự án. Trong khi nghiên cứu về StackOverflow, tôi tình cờ thấy một điều gì đó khiến tôi nhớ đến điều này và tôi muốn viết một đoạn giới thiệu ngắn về nó.

Câu hỏi đặt ra là: Làm thế nào để tạo một bảng trong HTML từ một mảng 2 chiều trong JavaScript

Tóm tắt:

Làm sôi có thể convert từ mảng này:

var tableArr = [

[“row 1, cell 1”, “row 1, cell 2”],

[“row 2, cell 1”, “row 2, cell 2”]

]

Thành một bảng nhìn như thế này:

Điều này đã mở ra một lượng lớn người trả lời câu hỏi bằng cách sử dụng các phép lặp quá phức tạp, khai báo và hợp nhất nhiều mảng cũng như một số sử dụng nối chuỗi.

Câu trả lời được chấp nhận, mặc dù hợp lý, nó không phải là đáp án tốt nhất (theo ý tôi). Tại sao? Nếu bạn chỉ mới bắt đầu trong Web Design, hoặc bạn đã tham gia chỉ trong một thời gian ngắn, bạn có thể không nhận ra rằng Table là một phần thiết yếu của Web trong nhiều năm.

Nếu không có những sự cải tiến về CSS cho phép bạn chia trang của mình thành 9 hoặc 12 cột dễ dàng và vô số hàng, việc tổ chức nội dung ngày trước(Nếu tôi có thể mơ hồ và cổ xưa như vậy) gây khó chịu hơn đáng kể và yêu cầu sử dụng nhiều Frames hoặc phổ biến hơn là Table.

Đây là trường hợp DOM thực sự đã được mở rộng để bao gồm các phương thức dễ sử dụng trên chính các Table. Có những cuộc biểu tình về điều này xung quanh, nhưng có vẻ như chúng thường bị lãng quên. Chúng ta hãy xem!

The table object

Cùng nhìn nhanh vào Table Object. Cùng nhìn vào bảng bằng cách sử dụng console.log.dir Để xem thuộc tính của bảng.

let table = document.createElement('table');

console.dir(table);

Kết quả trong màn hình console trên Browser nên trả về cho bạn một phần tử mở rộng. Nếu bạn mở rộng, bạn sẽ thấy tất cả các thuộc tính của Table element, nó bao gồm tất cả các thuộc tính tiêu chuẩn của phần tử như: style, innerHTML và id

Tất cả thuộc tính được đặt tên theo bảng chữ cái, và nếu bạn scroll xuống tới chữ R bạn có thể ngạc nhiên khi thấy thuộc tính với title rows 

Hiện tại row là rỗng, cùng thay đổi nó.

Thêm dòng và thêm cột

Làm thế nào để thêm một dòng theo chương trình? Giống như thế này:

let table = document.createElement('table'); 

table.insertRow(); 

console.log(table);

Nếu bạn nhìn vào màn hình console, bạn sẽ thấy rằng chúng ta đã thành công.

Và nếu bạn thay đổi console.log(table) thành console.dir(table.rows), Bạn sẽ nhận được những điều sau đây:

Phương thức insertRow đến từ đâu?

Đó là một phần đặc tả của phần tử DOM. Nó là một điều rất cơ bản, nó miễn phí và luôn luôn có sẵn. Nó thực sự đơn giản như chính nó, vì vậy đừng nghĩ quá nhiều về điều đó. Nó được tích hợp sẵn với Table.

Làm thế nào để thêm một cột vào trong một hàng? Điều này khá đơn giản!

let table = document.createElement('table');

let row = table.insertRow();

let cell = row.insertCell();

cell.textContent = "New Cell!";

document.body.appendChild(table);

Thêm cột tương tự như cách bạn thêm hàng, chỉ là thêm nó trên phần tử Row chứ không phải phần tử Table.

Đặt nó cùng nhau

Cùng xử lý câu hỏi trên StackOverflow. 

Tóm tắt 

Làm thế nào để convert 2 mảng này

var tableArr = [

 [“row 1, cell 1”, “row 1, cell 2”],

 [“row 2, cell 1”, “row 2, cell 2”]

]

Vào một bảng như thế này:

Nó không quá khó để hình dung những gì cần làm để đạt được điều đó:

1. Lặp lại tất cả array(row) trong tableArr
2. Thêm một phần tử row mới vào trong bảng
3. Lặp lại mọi index(cell) trong mỗi array(row)
4. Trong khi lặp qua index(cell), hay thêm text vào phần tử cell đã được tạo.
5. Thêm bảng đã biên dịch vào DOM

Đoạn code sẽ trông như sau:

//setup our table array

var tableArr = [

  ["row 1, cell 1", "row 1, cell 2"],

  ["row 2, cell 1", "row 2, cell 2"]

]

//create a Table Object

let table = document.createElement('table');

//iterate over every array(row) within tableArr

for (let row of tableArr) {

//Insert a new row element into the table element

  table.insertRow();

//Iterate over every index(cell) in each array(row)

  for (let cell of row) {

//While iterating over the index(cell)

//insert a cell into the table element

    let newCell = table.rows[table.rows.length - 1].insertCell();

//add text to the created cell element

    newCell.textContent = cell;

  }

}

//append the compiled table to the DOM

document.body.appendChild(table);

Kết luận

DOM rất mạnh mẽ. Có nhiều cái hiếm khi được sử dụng, và trong khi bạn đang nỗ lực không mệt mỏi để phát triển một số chức năng nhất định (Không phải tất cả chúng ta sao?) cố gắng nhớ tất cả những thứ chúng ta đã hoàn thành trước đó, và có thể có một cách đơn giản hơn, vì vậy hãy dành chút thời gian tìm kiếm nó!