Di bawah ini kita akan mempelajari cara mengurutkan tabel HTML, menggunakan JavaScript.
Klik tombol untuk mengurutkan tabel menurut abjad, berdasarkan nama pelanggan:
HTML
xxxxxxxxxx105
1
2
<html>3
<head>4
<title>Sort a HTML Table Alphabetically</title>5
<style>6
table {7
border-spacing: 0;8
width: 100%;9
border: 1px solid #ddd;10
}11
12
th, td {13
text-align: left;14
padding: 16px;15
}16
17
tr:nth-child(even) {18
background-color: #f2f2f219
}20
</style>21
</head>22
<body>23
24
<p>Klik tombol untuk mengurutkan tabel menurut abjad, berdasarkan nama:</p>25
<p><button onclick="sortTable()">Sort</button></p>26
27
<table id="myTable">28
<tr>29
<th>Name</th>30
<th>Negara</th>31
</tr>32
<tr>33
<td>Bernard Alfonso</td>34
<td>Swedia</td>35
</tr>36
<tr>37
<td>Kim Tae Hee</td>38
<td>Korea Selatan</td>39
</tr>40
<tr>41
<td>Alfreds Futterkiste</td>42
<td>Jerman</td>43
</tr>44
<tr>45
<td>Alfa fa</td>46
<td>Amerika Serikat</td>47
</tr>48
<tr>49
<td>Magdalena</td>50
<td>Itali</td>51
</tr>52
<tr>53
<td>Rowoon</td>54
<td>Korea SElatan</td>55
</tr>56
<tr>57
<td>Ayu</td>58
<td>Indonesia</td>59
</tr>60
<tr>61
<td>Dafa</td>62
<td>Kanada</td>63
</tr>64
</table>65
66
<script>67
function sortTable() {68
var table, rows, switching, i, x, y, shouldSwitch;69
table = document.getElementById("myTable");70
switching = true;71
/*Buat looping yang akan berlanjut sampai72
tidak ada switching yang dilakukan:*/73
while (switching) {74
//mulai dengan: belum ada switching yang selesai:75
switching = false;76
rows = table.rows;77
/*Ulangi melalui semua baris tabel (kecuali78
pertama, yang berisi header tabel):*/79
for (i = 1; i < (rows.length - 1); i++) {80
//mulailah dengan mengatakan seharusnya tidak ada switching:81
shouldSwitch = false;82
/*Dapatkan dua elemen yang ingin dibandingkan,83
satu dari baris saat ini dan satu dari baris berikutnya:*/84
x = rows[i].getElementsByTagName("TD")[0];85
y = rows[i + 1].getElementsByTagName("TD")[0];86
//periksa apakah kedua baris harus bertukar tempat:87
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {88
// jika demikian, tandai sebagai switching dan hentikan looping:89
shouldSwitch = true;90
break;91
}92
}93
if (shouldSwitch) {94
/*Jika switch telah ditandai, lakukan switching95
dan tandai bahwa switch telah dilakukan:*/96
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);97
switching = true;98
}99
}100
}101
</script>102
103
</body>104
</html>105
Section Artikel [hide]
Membuat Fungsi Sortir
Contoh
HTML
xxxxxxxxxx105
1
2
<html>3
<head>4
<title>Sort a HTML Table Alphabetically</title>5
<style>6
table {7
border-spacing: 0;8
width: 100%;9
border: 1px solid #ddd;10
}11
12
th, td {13
text-align: left;14
padding: 16px;15
}16
17
tr:nth-child(even) {18
background-color: #f2f2f219
}20
</style>21
</head>22
<body>23
24
<p>Klik tombol untuk mengurutkan tabel menurut abjad, berdasarkan nama:</p>25
<p><button onclick="sortTable()">Sort</button></p>26
27
<table id="myTable">28
<tr>29
<th>Name</th>30
<th>Negara</th>31
</tr>32
<tr>33
<td>Bernard Alfonso</td>34
<td>Swedia</td>35
</tr>36
<tr>37
<td>Kim Tae Hee</td>38
<td>Korea Selatan</td>39
</tr>40
<tr>41
<td>Alfreds Futterkiste</td>42
<td>Jerman</td>43
</tr>44
<tr>45
<td>Alfa fa</td>46
<td>Amerika Serikat</td>47
</tr>48
<tr>49
<td>Magdalena</td>50
<td>Itali</td>51
</tr>52
<tr>53
<td>Rowoon</td>54
<td>Korea SElatan</td>55
</tr>56
<tr>57
<td>Ayu</td>58
<td>Indonesia</td>59
</tr>60
<tr>61
<td>Dafa</td>62
<td>Kanada</td>63
</tr>64
</table>65
66
<script>67
function sortTable() {68
var table, rows, switching, i, x, y, shouldSwitch;69
table = document.getElementById("myTable");70
switching = true;71
/*Buat looping yang akan berlanjut sampai72
tidak ada switching yang dilakukan:*/73
while (switching) {74
//mulai dengan: belum ada switching yang selesai:75
switching = false;76
rows = table.rows;77
/*Ulangi melalui semua baris tabel (kecuali78
pertama, yang berisi header tabel):*/79
for (i = 1; i < (rows.length - 1); i++) {80
//mulailah dengan mengatakan seharusnya tidak ada switching:81
shouldSwitch = false;82
/*Dapatkan dua elemen yang ingin dibandingkan,83
satu dari baris saat ini dan satu dari baris berikutnya:*/84
x = rows[i].getElementsByTagName("TD")[0];85
y = rows[i + 1].getElementsByTagName("TD")[0];86
//periksa apakah kedua baris harus bertukar tempat:87
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {88
// jika demikian, tandai sebagai switching dan hentikan looping:89
shouldSwitch = true;90
break;91
}92
}93
if (shouldSwitch) {94
/*Jika switch telah ditandai, lakukan switching95
dan tandai bahwa switch telah dilakukan:*/96
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);97
switching = true;98
}99
}100
}101
</script>102
103
</body>104
</html>105
Urutkan Tabel dengan Mengklik Header
Klik header untuk mengurutkan tabel.
Klik “Nama” untuk mengurutkan berdasarkan nama dan “Negara” untuk mengurutkan berdasarkan negara.
Pertama kali kita mengklik, arah pengurutannya adalah menaik (A ke Z).
Contoh
HTML
xxxxxxxxxx135
1
2
<html>3
<head>4
<title>Sort a HTML Table Alphabetically</title>5
<style>6
table {7
border-spacing: 0;8
width: 100%;9
border: 1px solid #ddd;10
}11
12
th {13
cursor: pointer;14
}15
16
th, td {17
text-align: left;18
padding: 16px;19
}20
21
tr:nth-child(even) {22
background-color: #f2f2f223
}24
</style>25
</head>26
<body>27
28
<p><strong>Klik header untuk mengurutkan tabel. </strong> </p>29
<p> Pertama kali mengeklik, arah pengurutan adalah ascending (A ke Z). </p>30
<p> Klik lagi, dan arah pengurutan akan descending (Z ke A): </p>31
32
<table id="myTable">33
<tr>34
<!--Saat header diklik, jalankan fungsi sortTable, dengan parameter, 0 untuk mengurutkan berdasarkan nama, 1 untuk mengurutkan berdasarkan negara:--> 35
<th onclick="sortTable(0)">Name</th>36
<th onclick="sortTable(1)">Negara</th>37
</tr>38
<tr>39
<th>Name</th>40
<th>Negara</th>41
</tr>42
<tr>43
<td>Bernard Alfonso</td>44
<td>Swedia</td>45
</tr>46
<tr>47
<td>Kim Tae Hee</td>48
<td>Korea Selatan</td>49
</tr>50
<tr>51
<td>Alfreds Futterkiste</td>52
<td>Jerman</td>53
</tr>54
<tr>55
<td>Alfa fa</td>56
<td>Amerika Serikat</td>57
</tr>58
<tr>59
<td>Magdalena</td>60
<td>Itali</td>61
</tr>62
<tr>63
<td>Rowoon</td>64
<td>Korea SElatan</td>65
</tr>66
<tr>67
<td>Ayu</td>68
<td>Indonesia</td>69
</tr>70
<tr>71
<td>Dafa</td>72
<td>Kanada</td>73
</tr>74
</table>75
76
<script>77
function sortTable(n) {78
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;79
table = document.getElementById("myTable");80
switching = true;81
//Atur arah penyortiran ke ascending:82
dir = "asc"; 83
/*Buat looping yang akan berlanjut sampai84
tidak ada switching yang dilakukan:*/85
while (switching) {86
//mulailah dengan mengatakan: tidak ada switching yang dilakukan:87
switching = false;88
rows = table.rows;89
/*Ulangi melalui semua baris tabel (kecuali90
pertama, yang berisi header tabel):*/91
for (i = 1; i < (rows.length - 1); i++) {92
//mulailah dengan mengatakan seharusnya tidak ada switching:93
shouldSwitch = false;94
/*Dapatkan dua elemen yang ingin dibandingkan,95
satu dari baris saat ini dan satu dari baris berikutnya:*/96
x = rows[i].getElementsByTagName("TD")[n];97
y = rows[i + 1].getElementsByTagName("TD")[n];98
/*periksa apakah dua baris harus bertukar tempat,99
berdasarkan arah, asc atau desc:*/100
if (dir == "asc") {101
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {102
//jika demikian, tandai sebagai switcing dan hentikan looping:103
shouldSwitch= true;104
break;105
}106
} else if (dir == "desc") {107
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {108
//jika demikian, tandai sebagai switch dan hentikan looping:109
shouldSwitch = true;110
break;111
}112
}113
}114
if (shouldSwitch) {115
/*Jika switch telah ditandai, lakukan switching116
dan tandai bahwa switch telah dilakukan:*/117
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);118
switching = true;119
//Setiap kali switching dilakukan, tingkatkan hitungan ini dengan 1:120
switchcount ++; 121
} else {122
/*Jika tidak ada switching yang dilakukan DAN arahnya adalah "ascending",123
atur arah ke "desc" dan jalankan while loop lagi.*/124
if (switchcount == 0 && dir == "asc") {125
dir = "desc";126
switching = true;127
}128
}129
}130
}131
</script>132
133
</body>134
</html>135
Sortir Tabel Secara Numerik
Contoh
HTML
xxxxxxxxxx102
1
2
<html>3
<head>4
<title>Sort a HTML Table Numerically</title>5
<style>6
table {7
border-spacing: 0;8
width: 100%;9
border: 1px solid #ddd;10
}11
12
th, td {13
text-align: left;14
padding: 16px;15
}16
17
tr:nth-child(even) {18
background-color: #f2f2f219
}20
</style>21
</head>22
<body>23
24
<p>Click the button to sort the table numerically:</p>25
<p><button onclick="sortTable()">Sort</button></p>26
27
<table id="myTable">28
<tr>29
<th>ID</th>30
<th>Nama</th>31
</tr>32
<tr>33
<td>5</td>34
<td>Bernard</td>35
</tr>36
<tr>37
<td>3</td>38
<td>Agan</td>39
</tr>40
<tr>41
<td>6</td>42
<td>Albert</td>43
</tr>44
<tr>45
<td>2</td>46
<td>Keenan</td>47
</tr>48
<tr>49
<td>1</td>50
<td>Athar</td>51
</tr>52
<tr>53
<td>7</td>54
<td>Paris </td>55
</tr>56
<tr>57
<td>4</td>58
<td>Dingsding</td>59
</tr>60
61
</table>62
63
<script>64
function sortTable() {65
var table, rows, switching, i, x, y, shouldSwitch;66
table = document.getElementById("myTable");67
switching = true;68
/*Buat looping yang akan berlanjut sampai69
tidak ada switching yang dilakukan:*/70
while (switching) {71
//mulailah dengan mengatakan: tidak ada peralihan :72
switching = false;73
rows = table.rows;74
/*Looping melalui semua baris tabel (kecuali75
pertama, yang berisi header tabel):*/76
for (i = 1; i < (rows.length - 1); i++) {77
//mulailah dengan mengatakan seharusnya tidak ada switching:78
shouldSwitch = false;79
/*Dapatkan dua elemen yang ingin dibandingkan,80
satu dari baris saat ini dan satu dari baris berikutnya:*/81
x = rows[i].getElementsByTagName("TD")[0];82
y = rows[i + 1].getElementsByTagName("TD")[0];83
//periksa apakah kedua baris harus bertukar tempat:84
if (Number(x.innerHTML) > Number(y.innerHTML)) {85
//jika demikian, tandai sebagai switching dan hentikan looping:86
shouldSwitch = true;87
break;88
}89
}90
if (shouldSwitch) {91
/*Jika switch telah ditandai, lakukan switching92
dan tandai bahwa switch telah dilakukan:*/93
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);94
switching = true;95
}96
}97
}98
</script>99
100
</body>101
</html>102
