ใช้เมธอด HTML DOM console.table() เพื่อแสดงข้อมูลในรูปแบบตารางที่มีการจัดระเบียบอย่างดี วิธีนี้สามารถใช้เพื่อแสดงภาพอาร์เรย์หรือวัตถุที่ซับซ้อนได้ ตารางถูกจัดระเบียบในลักษณะที่แต่ละองค์ประกอบในอาร์เรย์จะเป็นแถวในตาราง ต้องใช้พารามิเตอร์ tabledata (บังคับ) และ tablecolumns (ตัวเลือก) สองตัว

ไวยากรณ์

ต่อไปนี้เป็นไวยากรณ์สำหรับเมธอด console.table() -

console.table( tabledata, tablecolumns );

ที่นี่ -

ข้อมูลตารางเป็นค่าพารามิเตอร์บังคับ เป็นข้อมูลที่ใช้ในการกรอกตาราง อาจเป็นประเภทอ็อบเจกต์หรืออาร์เรย์ก็ได้
Tablecolumns เป็นค่าพารามิเตอร์ทางเลือก เป็นพารามิเตอร์อาร์เรย์ที่ระบุคอลัมน์ที่ควรแสดงในตาราง

ตัวอย่าง

ให้เราดูตัวอย่างสำหรับ HTML DOM console.table() วิธีการ -

console.table() Method

คลิกที่ปุ่มด้านล่างเพื่อสร้างตารางคอนโซล

ดูตารางในแท็บคอนโซล

ผลลัพธ์

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

HTML DOM console.table() วิธีการ

เมื่อคลิกปุ่ม TABLE และดูในแท็บคอนโซล -

HTML DOM console.table() วิธีการ

ในตัวอย่างข้างต้น −

ขั้นแรกเราได้สร้างตารางปุ่มที่จะเรียกใช้ฟังก์ชัน createTable() เมื่อผู้ใช้คลิก

createTable() วิธีการมีสามอาร์เรย์ของวัตถุที่สร้างขึ้นภายในนั้น อาร์เรย์ของอ็อบเจ็กต์มีชื่อว่า fruit1, fruit2 และ fruit3 ตามลำดับ จากนั้นชื่อของอาร์เรย์ของวัตถุจะถูกส่งผ่านเป็นพารามิเตอร์แรก (tableData) ไปยังเมธอด table() ของคอนโซล

ในพารามิเตอร์ทางเลือกที่สอง เราส่งชื่อของคอลัมน์เป็นอาร์เรย์ เราต้องการรวมไว้ในตาราง เนื่องจากเราได้ระบุคอลัมน์ "ชื่อ" และ "ราคา" คอลัมน์เหล่านี้จะเห็นในตารางและจะไม่มีคอลัมน์ "สี" -

ฟังก์ชัน createTable(){ var fruit1 ={ Name :"Mango" ราคา :"100" สี:"Yellow" } var fruit2 ={ Name :"Guava" ราคา :"50" สี:"Green " } var fruit3 ={ ชื่อ :"Strawberry", ราคา :"150", สี:"Red" } console.table([fruit1, fruit2, fruit3], ["Name","price"]);}