Iso Web Id Tutorial Komputer
Artikel ini saya buat untuk menjawab pertanyaan dari seorang teman dimana beliau kesulitan untuk melakukan checked pada tiap – tiap cell table, sebenarnya ini sangat simple dan mudah kalo menggunakan framework jquery 
. Teknik ini hampir sama seperti Check All hanya saja bila check all kalian harus melakukan loop pada tiap – tiap row table, tapi pada script ini kalian cukup melakukan cek kondisi bila telah terchecked atau tidak.
OK langsung saja kita liat susunan code nya
buat dahulu file htmlnya seperti berikut :
<html>
<head>
<title>Table rows</title>
<style>
table{border: 1px solid}
table tr{cursor:pointer;}
</style>
</head>
<body>
<table cellpadding=”2″ cellspacing=”2″ id=”tb_list”>
<thead>
<tr>
<th></th>
<th>Nama</th>
<th>Email</th>
<th>Status</th>
<th>Tgl. entry</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=”checkbox” name=”check” id=”check” value=”1″ /></td>
<td>langga</td>
<td>qu4ck@iso.web.id</td>
<td>Active</td>
<td>15-10-2012</td>
</tr>
<tr>
<td><input type=”checkbox” name=”check” id=”check” value=”2″ /></td>
<td>rudi</td>
<td>rudi@yahoo.com</td>
<td>Active</td>
<td>15-10-2012</td>
</tr>
<tr>
<td><input type=”checkbox” name=”check” id=”check” value=”3″ /></td>
<td>selly</td>
<td>selly@yahoo.com</td>
<td>Active</td>
<td>15-10-2012</td>
</tr>
</tbody>
</table>
</body>
</html>
Setelah kalian membuat code html diatas simpan dengan nama table.html, saya tidak menjelaskan code diatas karena basic dari code html kalian dapat mempelajari code html lebih lanjut pada w3schools.
kita lanjutkan pada javascript, sisipkan code dibawah pada tag Head
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(“tbody tr:even”).css(“background-color”,”#CCCCCC”); // zebra stripe table
$(“tbody tr:odd”).css(“background-color”,”#FFFFFF”);
$(“tbody tr”).click(function(){
var check = $(this).find(“input:checkbox”).attr(“checked”); // apakah target telah tercheckedif (check == true){ // even untuk cek target checkbox
$(this).find(“input:checkbox”).removeAttr(“checked”); //check bila belum terchcked
}else {
$(this).find(“input:checkbox”).attr(“checked”, “checked”); // uncheck bila telah terchecked
}
});
});
</script>
Cukup mudah bukan, dan sangat simple untuk melakukan check pada tiap – tiap row table.
code lengkapnya
<html>
<head>
<title>Table rows</title>
<style>
table{border: 1px solid}
table tr{cursor:pointer;}
</style>
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(“tbody tr:even”).css(“background-color”,”#CCCCCC”);
$(“tbody tr:odd”).css(“background-color”,”#FFFFFF”);
$(“tbody tr”).click(function(){
var check = $(this).find(“input:checkbox”).attr(“checked”);if (check == true){
$(this).find(“input:checkbox”).removeAttr(“checked”);
}else {
$(this).find(“input:checkbox”).attr(“checked”, “checked”);
}
});
});
</script>
</head>
<body>
<table cellpadding=”2″ cellspacing=”2″ id=”tb_list”>
<thead>
<tr>
<th></th>
<th>Nama</th>
<th>Email</th>
<th>Status</th>
<th>Tgl. entry</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type=”checkbox” name=”check” id=”check” value=”1″ /></td>
<td>langga</td>
<td>qu4ck@iso.web.id</td>
<td>Active</td>
<td>15-10-2012</td>
</tr>
<tr>
<td><input type=”checkbox” name=”check” id=”check” value=”2″ /></td>
<td>rudi</td>
<td>rudi@yahoo.com</td>
<td>Active</td>
<td>15-10-2012</td>
</tr>
<tr>
<td><input type=”checkbox” name=”check” id=”check” value=”3″ /></td>
<td>selly</td>
<td>selly@yahoo.com</td>
<td>Active</td>
<td>15-10-2012</td>
</tr>
</tbody>
</table>
</body>
</html>
Semoga bermanfaat.
