โพสต์นี้จะอธิบายขั้นตอนการสร้างตารางที่มีอาร์เรย์ของวัตถุใน JavaScript
จะสร้างตารางจากอาร์เรย์ของวัตถุใน JavaScript ได้อย่างไร?
ในการสร้างตารางจากอาร์เรย์ของวัตถุ เราจะใช้วิธีการต่อไปนี้:
มาสำรวจแต่ละวิธีกัน!
วิธีที่ 1: สร้างตารางจากอาร์เรย์ของวัตถุโดยใช้สตริงตาราง HTML ใน JavaScript
ใน JavaScript จุดประสงค์ของ “ สตริง ” คือการจัดเก็บข้อความ ตัวเลข หรือสัญลักษณ์พิเศษ สตริงถูกกำหนดโดยการปิดอักขระหรือกลุ่มของอักขระในเครื่องหมายคำพูดคู่หรือเดี่ยว โดยเฉพาะอย่างยิ่ง พวกเขายังใช้สำหรับการสร้างตาราง
มาดูตัวอย่างกันเพื่อให้ได้แนวคิดที่ชัดเจนเกี่ยวกับการสร้างตารางจากอาร์เรย์ของวัตถุโดยใช้สตริงตาราง
ตัวอย่าง
ในตัวอย่างของเรา เราจะใช้ “ มาประกาศว่า “ อาร์เรย์ ” และกำหนดค่าบางอย่างให้กับมัน: เริ่มต้นตัวแปร “ โต๊ะ ” เพื่อจัดเก็บสตริงตาราง HTML: ระบุสองเซลล์ต่อแถวโดยตั้งค่า “ สอง ' ของ ' เซลล์ ' ตัวแปร: ต่อไป ใช้ “ array.for แต่ละ () ” วิธีการส่งผ่านแต่ละองค์ประกอบอาร์เรย์จากฟังก์ชัน จากนั้นตั้งค่า “ {ค่า} ” พร้อมตัวระบุ “ $ ' ภายใน ' กำหนดแท็กปิดตารางให้กับตัวแปร “ โต๊ะ ' ใช้ ' += ตัวดำเนินการ จากนั้นเชื่อมโยงเนื้อหาของตารางกับคอนเทนเนอร์ที่สร้างขึ้นโดยใช้คอนเทนเนอร์ เพื่อที่จะใช้“ การดูถูก() ” และส่งรหัสไปยังมันและวาง HTML ภายในเพื่อตั้งค่าภายในตารางตัวแปร: ในไฟล์ CSS ของเรา , เราจะนำคุณสมบัติบางอย่างไปใช้กับตารางและเซลล์ข้อมูล ในการทำเช่นนั้น เราจะตั้งค่า “ ชายแดน ” ทรัพย์สินที่มีค่า “ 1px ของแข็ง ” เพื่อกำหนดเส้นขอบรอบตารางและเซลล์และ “ การขยายความ ” ทรัพย์สินที่มีค่า “ 3px ” เพื่อสร้างพื้นที่ที่กำหนดรอบ ๆ เนื้อหาองค์ประกอบตามเส้นขอบที่กำหนด: บันทึกรหัสที่กำหนด เปิดไฟล์ HTML และดูตารางวัตถุของอาร์เรย์: มาสำรวจวิธีการสร้างตารางจากอาร์เรย์ของวัตถุใน JavaScript กันอีกวิธีหนึ่ง “ แผนที่() ” จะใช้ฟังก์ชันเฉพาะกับแต่ละองค์ประกอบของอาร์เรย์ และในทางกลับกัน ก็จะให้อาร์เรย์ใหม่ อย่างไรก็ตาม วิธีนี้ไม่ได้ทำการแทนที่ใดๆ ในอาร์เรย์ดั้งเดิม คุณยังสามารถใช้เมธอด map() เพื่อสร้างตารางที่มีอาร์เรย์ของอ็อบเจ็กต์ มาสร้างอาร์เรย์โดยใช้ ' อนุญาต ' คำสำคัญ. กำหนดค่าบางอย่างให้กับคุณสมบัติของวัตถุหรือคีย์: เข้าถึงคอนเทนเนอร์ที่สร้างขึ้นแล้วโดยใช้วิธี belittlement() และใช้ “ แทรกAdjacentHTML() ” วิธีการเพิ่มแท็กตาราง: ใช้ ' Object.keys() ” วิธีการเข้าถึงคีย์ของวัตถุที่กำหนดแล้วใช้ “ เข้าร่วม() ” เพื่อวางเป็นหัวเรื่องภายใน “ หลังจากเพิ่มแท็กปิดหัวตารางและแถวตารางและแท็กเปิดข้อมูลแล้ว เราจะใช้ “ แผนที่() ” วิธีการเรียก “ Object.values() ” ฟังก์ชันเมธอดสำหรับแต่ละค่าของคีย์อ็อบเจ็กต์ จากนั้นใช้ “ เข้าร่วม() ” เพื่อวางพวกมันในแถวและย้ายไปที่แถวถัดไป: อย่างที่คุณเห็น เราได้สร้างตารางจากอาร์เรย์ของอ็อบเจ็กต์ที่กำหนดสำเร็จแล้ว: เราได้กล่าวถึงวิธีที่มีประสิทธิภาพในการสร้างตารางจากอาร์เรย์ของวัตถุใน JavaScript ใน JavaScript สำหรับการสร้างตารางจากอาร์เรย์ของวัตถุ HTML “ โต๊ะ ” สตริงหรือ “ แผนที่() ” ก็สามารถนำไปใช้ได้ โดยระบุแท็ก div ด้วย id จากนั้นประกาศอาร์เรย์ของออบเจ็กต์ในทั้งสองวิธี จัดเก็บแท็กตารางภายในตัวแปร หรือส่งคืนโดยตรงไปยังองค์ประกอบ HTML ที่เชื่อมต่อกับข้อมูล โพสต์นี้ได้กล่าวถึงวิธีการสร้างตารางจากอาร์เรย์ของวัตถุโดยใช้ JavaScript
เป็นอาร์เรย์ = [ 'เครื่องหมาย' , 'กระจอก' , 'ปลา' , 'ส้ม' ] ;
' ;
” แท็ก ต่อไปประกาศตัวแปร “ เอ ” เพื่อเพิ่มเพื่อเพิ่มดัชนี “ ผม ” และระบุ “ ถ้า ” เงื่อนไขในลักษณะที่ว่าถ้าค่าเซลล์ที่เหลือและตัวแปรที่สร้างขึ้นมีค่าเท่ากับศูนย์และค่า “ เอ ” มีความยาวไม่เท่ากันของอาร์เรย์ จากนั้นแบ่งเป็นบรรทัดหรือแถวถัดไปของตาราง: อาร์เรย์ สำหรับ แต่ละ ( ( ค่า ฉัน ) => {
โต๊ะ += ` < TD > $ { ค่า } TD > ` ;
มี = ผม + 1 ;
ถ้า ( เอ % เซลล์ == 0 && เอ != อาร์เรย์ ความยาว ) {
โต๊ะ += ' ; ' ;
} } ) ;
เอกสาร. การดูถูก ( 'คอนเทนเนอร์' ) . ภายใน HTML = โต๊ะ ;
ชายแดน : 1px ของแข็ง ;
การขยายความ : 3px ;
}
วิธีที่ 2: สร้างตารางจากอาร์เรย์ของวัตถุโดยใช้วิธี map() ใน JavaScript
ตัวอย่าง
{ 'ชื่อ' : 'เครื่องหมาย' , 'อายุ' : 'ยี่สิบ (20)' } ,
{ 'ชื่อ' : “ฉันไง” , 'อายุ' : 'สามสิบ (30)' } ]
` < โต๊ะ >< tr >< ไทย >
” แท็ก: $ { วัตถุ . กุญแจ ( อาร์เรย์ [ 0 ] ) . เข้าร่วม ( ' ' ) }
. เข้าร่วม ( '' ) ) . เข้าร่วม ( ' ' ) } โต๊ะ > ` )
บทสรุป