Cara menjumlahkan jadual menggunakan JavaScript

Dengan perkembangan Internet, semakin banyak laman web perlu menggunakan jadual untuk memaparkan data. Dalam jadual, penjumlahan adalah operasi yang sangat asas. Dalam JavaScript, kita boleh menggunakan gelung untuk melaksanakan fungsi penjumlahan jadual. Artikel ini menerangkan cara menjumlahkan jadual menggunakan JavaScript.

Struktur jadual HTML

Sebelum memperkenalkan cara menjumlahkan jadual, mari kita lihat struktur jadual dalam HTML terlebih dahulu.

姓名	年龄	成绩
小明	18	85
小红	19	90
小刚	20	80

Seperti yang ditunjukkan di atas, jadual HTML asas terdiri daripada elemen jadual, thead, tbody, tr, th dan td.

Antaranya, jadual mewakili keseluruhan jadual, thead mewakili pengepala jadual, tbody mewakili badan jadual, tr mewakili baris data, th mewakili sel pengepala, dan td mewakili sel data.

Pelaksanaan penjumlahan jadual JavaScript

Seterusnya, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi penjumlahan jadual.

Pertama, kita perlu mencari sel data dalam jadual yang perlu dijumlahkan. Dalam contoh di atas, kita perlu menjumlahkan gred. Kita boleh menggunakan kod berikut untuk mendapatkan sel skor:

const scores = document.querySelectorAll('table tbody tr td:nth-child(3)');

Dalam kod di atas , fungsi querySelectorAll boleh mendapatkan elemen td dalam semua jadual. Antaranya, :nth-child(3) bermaksud mendapatkan elemen td ketiga bagi setiap baris, iaitu sel gred.

Seterusnya, kita perlu mengulangi sel gred yang diperoleh dan menambah setiap nilai. Kodnya adalah seperti berikut:

biar jumlah = 0;
skor.forEach((skor) => {
jumlah += Nombor(skor.innerText);
});

Dalam kod di atas, kami menggunakan fungsi forEach untuk melintasi semua sel gred dan menambah setiap nilai pada pembolehubah jumlah. Perlu diingat bahawa kerana innerText mengembalikan nilai jenis rentetan, anda perlu menggunakan fungsi Nombor untuk menukarnya kepada jenis angka.

Akhir sekali, kita hanya perlu memaparkan nilai jumlah pada halaman. Kodnya adalah seperti berikut:

const result = document.createElement('div');
result.innerText = 总分：${sum};
document.body.append(result);

Melalui kod di atas, kita boleh melaksanakan fungsi jumlah lajur yang ditentukan dalam jadual.

Ringkasan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan operasi jumlah pada jadual HTML, dengan mencari elemen yang perlu dijumlahkan, menggunakan operasi traversal dan pengumpulan, dan akhirnya memaparkan pengiraan pada halaman Hasilnya, operasi jumlah mudah dilaksanakan.

Pengendalian jadual adalah bahagian penting dalam pembangunan web, dan menguasai pengetahuan ini adalah penting untuk meningkatkan kecekapan pembangunan. Kandungan yang diperkenalkan dalam artikel ini boleh membantu pembaca memperoleh pemahaman yang lebih mendalam tentang aplikasi JavaScript dalam pemprosesan data jadual, dan juga membantu pembaca memperoleh pemahaman yang lebih mendalam tentang idea praktikal yang sangat baik untuk pembangunan JavaScript, supaya dapat membangunkan aplikasi yang sangat baik dengan lebih baik.

Atas ialah kandungan terperinci Cara menjumlahkan jadual menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!