home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เมธอด HTML DOM console.table()

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

ไวยากรณ์

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

console.table(tabledata, tablecolumns);

ที่นี่ -

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

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

ตัวอย่าง

ลองดูตัวอย่างสำหรับเมธอด HTML DOM console.table() -

<!DOCTYPE html> <html> <body> <h1>console.table() Method</h1> <p>คลิกปุ่มด้านล่างเพื่อสร้างตารางคอนโซล</p> <button type="button" onclick="createTable()">TABLE</button> <script> function createTable(){ var fruit1 = { Name: "Mango", price: "100", color: "Yellow" }; var fruit2 = { Name: "Guava", price: "50", color: "Green" }; var fruit3 = { Name: "Strawberry", price: "150", color: "Red" }; console.table([fruit1, fruit2, fruit3], ["Name", "price"]); } </script> <p>ดูตารางในแท็บคอนโซล</p> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมธอด HTML DOM console.table()

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

เมธอด HTML DOM console.table()

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

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

<button type="button" onclick="createTable()">TABLE</button>

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

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

function createTable(){ var fruit1 = { Name: "Mango", price: "100", color: "Yellow" }; var fruit2 = { Name: "Guava", price: "50", color: "Green" }; var fruit3 = { Name: "Strawberry", price: "150", color: "Red" }; console.table([fruit1, fruit2, fruit3], ["Name", "price"]); }