Penjumlahan pada table atau yang paling mudah saat kita menggunakan Ms.excel yaitu tinggal blok nilai yang mau dihitung sampai batas nilai data diinginkan hanya tinggal pakai klik icon sum atau masukan rumusnya sangat mudah yaaa. Disini kita akan belajar menjumlahkan data yang tampil didalam table logikanya hampir sama seperti menggunakan rumus Ms.Excel memakai SUM, baiklah mari dimulai saja cara membuatnya sahabat bisa ikutin langkah-langkahnya.
Langkah Pertama siapkan file HTML nya untuk membuat sebuah table lalu isi beberapa data seperti yang saya buat dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div class="container"> <h1>Daftar Nilai Pengembangan Web Dasar</h1> <table id="nilai"> <tr> <th>No</th> <th>Nama Murid</th> <th>Nama Pelajaran</th> <th>Nilai</th> </tr> <tr> <td>1</td> <td>Anto</td> <td>HTML & CSS</td> <td>85</td> </tr> <tr> <td>2</td> <td>Besari</td> <td>HTML & CSS</td> <td>75</td> </tr> <tr> <td>3</td> <td>Charles</td> <td>HTML & CSS</td> <td>77</td> </tr> <tr> <td>4</td> <td>Deduk</td> <td>HTML & CSS</td> <td>65</td> </tr> <tr> <td>5</td> <td>Jelita</td> <td>HTML & CSS</td> <td>95</td> </tr> </table> <span id="hasil"></span> </div> |
Pada code diatas saya memberikan sebuah id=”nilai” untuk table, lalu ada sebuah span dengan id=”hasil” yang nanti digunakan untuk mencetak hasil penjumlahan, sebelum dilanjut jangan lupa tambahkan styel CSS seperti code berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<style> .container{width: 600px;margin: auto;text-align: center;} table{ margin: auto; } th,td{ border:1px solid #000; padding: 5px; } span{ font-weight: bold; margin-left: 170px; } </style> |
Dan langkah selanjutnya adalah code dari javascript untuk menjumlahkan data setiap cell atau column nya perhatikan dibawah ini:
|
1 2 3 4 5 6 7 8 9 |
<script> var table = document.getElementById("nilai"), sumHsl = 0; for(var t = 1; t < table.rows.length; t++) { sumHsl = sumHsl + parseInt(table.rows[t].cells[3].innerHTML); } document.getElementById("hasil").innerHTML = "Sum Value = "+ sumHsl; </script> |
pada script diatas saya membuat variabel table (nama var bebas) untuk mendapatkan nilai dari id table ,lalu sumHsl = 0 karena data belum dijumlahkan. Dan saat mengambil nilai pada cell table dengan index [3] jadi cell index dihitung dari 0.
Oke sekarang simpan semua code nya ,coba jalankan pada browser masing-masing apakah sudah sama seperti tampilan dibawah ini:
Demikian pembahasan tentang Cara Menjumlahkan Nilai Pada Table Menggunakan Javascript , semoga bermanfaat dan sampai jumpa lagi dengan pembahasan lainnya .
Terima kasih.