Javascript melaksanakan jadual pendaraban

王林
Lepaskan: 2023-05-09 18:08:08
asal
572 orang telah melayarinya

Jadual pendaraban ialah alat penting untuk pemula untuk mempelajari asas pendaraban Ia juga merupakan projek biasa bagi pengaturcara untuk mempraktikkan kemahiran pengaturcaraan mereka. Dalam artikel ini, saya akan menunjukkan kepada anda cara melaksanakan jadual pendaraban mudah menggunakan JavaScript.

Pertama sekali, kita perlu menjelaskan struktur asas jadual pendaraban. Jadual pendaraban biasanya merupakan jadual segi empat sama yang mengandungi nombor dari 1 hingga 10. Setiap baris dan lajur bermula dengan nombor ini dan mengisi grid jadual mengikut produknya.

Kita boleh menggunakan gelung bersarang untuk menjana jadual ini. Gelung luar digunakan untuk mengawal bilangan baris dalam jadual, dan gelung dalam digunakan untuk menjana lajur dalam setiap baris. Kod khusus adalah seperti berikut:

for (let i = 1; i <= 10; i++) {
  let row = '';
  for (let j = 1; j <= 10; j++) {
    row += (i * j) + '    ';
  }
  console.log(row);
}
Salin selepas log masuk

Dalam kod ini, kita mula-mula menggunakan gelung luar untuk mengawal bilangan baris dalam jadual, menggelung dari 1 hingga 10. Kami menggunakan gelung dalam untuk menjana baris setiap kali gelung luar dilaksanakan sekali.

Gelung dalam bergelung dari 1 hingga 10, dan setiap kali ia dilaksanakan, ia mendarabkan bilangan baris dan lajur semasa dan menambahkan hasil pada rentetan baris itu. Di sini, kami telah menggunakan rentetan templat daripada ES6 untuk membina rentetan, jadi hasilnya boleh diasingkan daripada hasil seterusnya menggunakan aksara.

Akhir sekali, kami menggunakan fungsi console.log() untuk mengeluarkan setiap baris ke konsol.

Jika anda ingin mencetak keputusan ke halaman HTML, anda boleh mengubah suai kod ini sedikit. Khususnya, anda boleh menggunakan fungsi document.createElement() untuk mencipta elemen jadual dalam halaman, dan kemudian gunakan atribut innerHTML untuk menambah setiap baris pada jadual. Kodnya adalah seperti berikut:

const table = document.createElement('table');
for (let i = 1; i <= 10; i++) {
  let row = '<tr>';
  for (let j = 1; j <= 10; j++) {
    row += '<td>' + (i * j) + '</td>';
  }
  row += '</tr>';
  table.innerHTML += row;
}
document.body.appendChild(table);
Salin selepas log masuk

Dalam kod ini, kami menggunakan fungsi document.createElement() untuk mencipta elemen jadual bernama jadual. Dalam gelung luar, kami membina setiap baris sebagai elemen HTML dan menggunakan gelung dalam untuk menjana

Akhir sekali, kami menambah elemen HTML ini pada elemen badan untuk menjadikannya sebahagian daripada dokumen.

Untuk meringkaskan, dalam artikel ini, kami menghasilkan jadual pendaraban mudah menggunakan JavaScript. Sama ada mengeluarkan dalam konsol atau menjana dalam halaman Web, ini adalah projek amalan yang baik. Pada masa yang sama, kami juga mempelajari cara menggunakan gelung bersarang untuk menjana struktur data yang kompleks.

Atas ialah kandungan terperinci Javascript melaksanakan jadual pendaraban. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan