Rumah  >  Artikel  >  hujung hadapan web  >  Javascript melaksanakan jadual pendaraban

Javascript melaksanakan jadual pendaraban

王林
王林asal
2023-05-09 18:08:08539semak imbas

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);
}

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);

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

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!

Kenyataan:
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
Artikel sebelumnya:kaedah dalam javascript fungsiArtikel seterusnya:kaedah dalam javascript fungsi