Siaran ini akan menerangkan prosedur untuk membentuk jadual dengan tatasusunan objek dalam JavaScript.
Bagaimana untuk Membuat Jadual Daripada Susunan Objek dalam JavaScript?
Untuk membuat jadual daripada pelbagai objek, kami akan menggunakan kaedah berikut:
Mari kita terokai setiap kaedah satu demi satu!
Kaedah 1: Cipta Jadual Daripada Tatasusunan Objek Menggunakan String Jadual HTML dalam JavaScript
Dalam JavaScript, tujuan ' tali ” ialah untuk menyimpan teks, nombor atau simbol khas. Rentetan ditakrifkan dengan menutup aksara atau kumpulan aksara dalam petikan berganda atau tunggal. Lebih khusus lagi, mereka juga digunakan untuk membuat jadual.
Mari kita ambil contoh untuk mendapatkan konsep yang jelas tentang mencipta jadual daripada tatasusunan objek menggunakan rentetan Jadual.
Contoh
Dalam contoh kami, kami akan menggunakan ' Mari kita isytiharkan ' tatasusunan ” dan tetapkan beberapa nilai kepadanya: Mulakan pembolehubah ' Jadual ” untuk menyimpan rentetan jadual HTML: Tentukan dua sel setiap baris dengan menetapkan nilai ' dua 'daripada' sel ” pembolehubah: Seterusnya, gunakan ' array.for Each() ” kaedah untuk menghantar setiap elemen tatasusunan daripada fungsi. Kemudian, tetapkan ' {value} 'dengan pengecam' $ ' Di antara ' Berikan teg penutup jadual kepada pembolehubah “ Jadual ' menggunakan ' += ” pengendali. Kemudian, pautkan kandungan Jadual ke bekas yang dibuat menggunakan bekasnya. Untuk itu, gunakan ' meremehkan() ” dan hantar id kepadanya dan letakkan HTML dalaman untuk menetapkan nilai dalam Jadual pembolehubah: Dalam fail CSS kami , kami akan menggunakan beberapa sifat pada jadual dan sel datanya. Untuk berbuat demikian, kami akan menetapkan ' sempadan ” harta dengan nilai “ 1px pepejal ' untuk menetapkan sempadan di sekeliling meja dan selnya dan ' padding ” harta dengan nilai “ 3px ” untuk menjana ruang yang ditentukan di sekeliling kandungan elemen, mengikut sempadan yang ditentukan: Simpan kod yang diberikan, buka fail HTML anda dan lihat jadual anda bagi objek tatasusunan: Mari kita terokai satu lagi kaedah untuk mencipta jadual daripada pelbagai objek dalam JavaScript. ' peta() ” kaedah menggunakan fungsi khusus untuk setiap elemen tatasusunan, dan sebagai balasan, ia menyediakan tatasusunan baharu. Walau bagaimanapun, kaedah ini tidak membuat sebarang penggantian dalam tatasusunan asal. Anda juga boleh menggunakan kaedah map() untuk membentuk jadual dengan pelbagai objek. Mari buat tatasusunan menggunakan ' biarkan ” kata kunci. Berikan beberapa nilai pada sifat objek atau kunci: Akses bekas yang telah dibuat dengan menggunakan kaedah belittlement() dan gunakan “ insertAdjacentHTML() ” kaedah untuk menambah teg jadual: Menggunakan ' Object.keys() kaedah untuk mengakses kekunci objek yang ditentukan dan kemudian menggunakan ' sertai() ' kaedah untuk meletakkannya sebagai tajuk dalam ' Selepas menambah teg penutup kepala jadual dan baris jadual dan teg pembukaan data, kami akan menggunakan ' peta() ' kaedah untuk memanggil ' Object.values() fungsi kaedah untuk setiap nilai kekunci objek, kemudian gunakan ' sertai() ” untuk meletakkannya dalam satu baris dan beralih ke yang seterusnya: Seperti yang anda lihat, kami telah berjaya mencipta jadual daripada tatasusunan objek yang ditentukan: Kami telah membincangkan cara yang cekap untuk mencipta jadual daripada pelbagai objek dalam JavaScript. Dalam JavaScript, untuk pembentukan jadual daripada pelbagai objek, HTML “ meja ” rentetan atau “ peta() ” kaedah boleh digunakan. Untuk berbuat demikian, tentukan tag div dengan id. Kemudian, isytiharkan tatasusunan objek dalam kedua-dua kaedah, simpan teg jadual dalam pembolehubah atau kembalikan terus kepada elemen HTML yang disambungkan dengan data. Siaran ini telah membincangkan kaedah untuk mencipta jadual daripada Array objek menggunakan JavaScript.
ialah tatasusunan = [ 'Tanda' , 'burung pipit' , 'Ikan' , 'Oren' ] ;
' ;
” tag. Seterusnya, isytiharkan pembolehubah “ a 'untuk menambah indeks' i ”, dan nyatakan “ jika ” keadaan sedemikian rupa sehingga jika baki sel nilai dan pembolehubah yang dicipta adalah sama dengan sifar dan nilai “ a ” bukanlah panjang tatasusunan yang sama, kemudian pecahkan ke baris atau baris seterusnya jadual: tatasusunan. untuk setiap satu ( ( nilai, i ) => {
Jadual += ` < TD > $ { nilai } TD > ` ;
ada = i + 1 ;
jika ( a % sel == 0 && a != tatasusunan. panjang ) {
Jadual += '' ; '
} } ) ;
dokumen. meremehkan ( 'bekas' ) . dalaman HTML = Jadual ;
sempadan : 1px pepejal ;
padding : 3px ;
}
Kaedah 2: Cipta Jadual Daripada Susunan Objek Menggunakan kaedah map() dalam JavaScript
Contoh
{ 'Nama' : 'Tanda' , 'Umur' : 'Dua puluh (20)' } ,
{ 'Nama' : 'Apa saya' , 'Umur' : 'Tiga puluh (30)' } ]
` < meja >< tr >< ke >
” tag: $ { Objek . kunci ( tatasusunan [ 0 ] ) . sertai ( ' ' ) }
. sertai ( '' ) ) . sertai ( ' ' ) } meja > ` )
Kesimpulan