Phương thức HTML DOM console.table()

Phương thức HTML DOM console.table() được dùng để hiển thị dữ liệu trong một định dạng bảng được tổ chức tốt. Phương thức này có thể được dùng để trực quan hóa các mảng hoặc đối tượng phức tạp. Bảng được tổ chức sao cho mỗi phần tử trong mảng sẽ là một hàng trong bảng. Nó nhận hai tham số: tabledata (bắt buộc) và tablecolumns (tùy chọn).

Cú pháp

Cú pháp sau đây dùng cho phương thức console.table():

console.table(tabledata, tablecolumns);

Ở đây:

• Tabledata là tham số bắt buộc. Nó đại diện cho dữ liệu được dùng để điền vào bảng. Nó có thể là kiểu đối tượng hoặc một mảng.

• Tablecolumns là tham số tùy chọn. Nó là tham số mảng chỉ định cột nào nên được hiển thị trong bảng.

Ví dụ

Hãy xem một ví dụ cho phương thức HTML DOM console.table():

<!DOCTYPE html> <html> <body> <h1>Phương thức console.table()</h1> <p>Nhấn nút bên dưới để tạo bảng console</p> <button type="button" onclick="createTable()">BẢNG</button> <script> function createTable(){ var fruit1 = { Name: "Xoài", price: "100", color: "Vàng" } var fruit2 = { Name: "Ổi", price: "50", color: "Xanh" } var fruit3 = { Name: "Dâu tây", price: "150", color: "Đỏ" } console.table([fruit1, fruit2, fruit3], ["Name", "price"]); } </script> <p>Xem bảng trong tab console</p> </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút BẢNG và xem nó trong tab console:

Trong ví dụ trên:

Chúng ta đã tạo nút BẢNG sẽ thực thi hàm createTable() khi được nhấp bởi người dùng.

<button type="button" onclick="createTable()">BẢNG</button>

Phương thức createTable() có ba mảng đối tượng được tạo bên trong nó. Các mảng đối tượng được đặt tên là fruit1, fruit2 và fruit3 tương ứng. Sau đó tên của các mảng đối tượng được truyền làm tham số đầu tiên (tableData) cho phương thức table() của console.

Trong tham số tùy chọn thứ hai, chúng ta truyền tên các cột dưới dạng mảng mà chúng ta muốn bao gồm trong bảng. Vì chúng ta đã chỉ định cột "Name" và "price"; các cột này sẽ được thấy trong bảng và sẽ không có cột "color":

function createTable(){ var fruit1 = { Name: "Xoài", price: "100", color: "Vàng" } var fruit2 = { Name: "Ổi", price: "50", color: "Xanh" } var fruit3 = { Name: "Dâu tây", price: "150", color: "Đỏ" } console.table([fruit1, fruit2, fruit3], ["Name", "price"]); }