Selected Table Row dengan CSS
Table hover sudah pernah kita bahas dan kali ini saya berikan cara supaya kita bisa click baris-baris pada table. Selain warna yang berubah pada baris di tunjuk oleh pointer mouse, kita juga bisa di click beberapa baris untuk memilihnya (selected table row).
Hal ini dapat dilakukan dengan menggunakan fungsi javascript querySelectorAll() dan addEventListener().
Berikut ini coding selengkapnya:
<html>
<head>
<title>CSS Select Table Row</title>
<style>
.mytable,th,td{border:1px solid #ffffff;border-collapse:collapse;font:12px verdana,arial,sans-serif;}
.mytable th {background:#000099;color:#ffffff;padding:10px;font-weight:bold;}
.mytable td {padding:8px;}
.mytable tr {background:#f0f0f0;}
.mytable tr:hover td {background:#c0c0c0;}
.mytable tr.selected {background: #00aacc;}
</style>
</head>
<body>
<table class="mytable">
<tbody>
<tr><th>No.</th><th width="200">Table Head 1</th><th width="200">Table Head 2</th></tr>
<tr><td>1</td><td>content</td><td>content</td></tr>
<tr><td>2</td><td>content</td><td>content</td></tr>
<tr><td>3</td><td>content</td><td>content</td></tr>
<tr><td>4</td><td>content</td><td>content</td></tr>
<tr><td>5</td><td>content</td><td>content</td></tr>
<tr><td>6</td><td>content</td><td>content</td></tr>
</tbody>
</table>
<script type="text/javascript">
var trs = document.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].addEventListener("click", function()
{ if(this.className.indexOf("selected") == 0)
this.className = "";
else
this.className = "selected";
});
}
</script>
</body>
</html>
Selamat mencoba, semoga sukses.