Create dynamic table.tr onclick event jQuery

“heheheee maaf klo ganggu mba
tapi kenapa kangen gini yaa?? 😀 ”

“..kayaknya kamu kangen
sama orang yang salah deh..”

….ups itu sekilas chat kmarin sih, klo menurut kalian pesan selanjutnya yg kudu saya kirim apaan yaa?? sempet kepikiran kayak gini sih buat balesnya,
“…sotau kamu mba, emang tau saya lagi kangen ama siapa :p ??..”
sayang kmaren malah balesnya gak kayak gitu 😀 ya sudahlah. lanjutkan perjuangan walau udah tau dia lebih care dengan yang lain dan mungkin gak kpikiran saya sama sekali :p hahahaaa.

sebenernya kalo dipikir-pikir sederhana itu yaa memang harus sederhana, semisal orang yang gak kita pikir bakal ngimpiin kita ehh malah ngimpiin kita. Ini serius lohh, ya saya sih gampang geeran yaa jadinya hal kek gitu aja udah seneng bangat 😀 langsung mikir yang aneh-aneh deh, kayak misal aja dia berarti punya sedikit perhatian ke kita padahal mah pas ditanya abis dah gw hahahaaa.

“.. gue ngimpiin lo
ngapain lo dateng kerumah gue???..”

apaaa??? melongo sambil nyengir-nyengir kegeeran saya baca pesannya
“..ahh serius lu?? bikin geer gw aje 😀 ”

“seriuss…
lo pake jaket item
terus ada didepan rumah gue
ngapain lo..??”

dalem ati udah keranjingan gak karuan aja nih, “buseeett ada cewe bilang ngimpiin gw”
hehehee tapi kepala ini langsung nangkep aja sih soalnya sebelumnya sempet ada kesalahpahaman sama nona itu 😀
yaa intinya sih dia ngerasa kecewa dan jadinya saya ngerasa ga enak aja sama dia.
nah mungkin karna itu kali dia jadi ngimpiin (bunga tidur memang indah :p ).

waduh-waduh curhatnya melebihi qutoa nih hahahaaa lanjut curhatnya di post yang lain ahh :D.
kali ini saya nyoba bikin script sederhana ahh, script ini nih terinspirasi sama salah satu situs pemerintah yaa sebut saja situs pangan lah.
jadi disitus itu ada tabel, nah baris pada tabel itu bisa diklik, terus pas diklik nanti muncul baris baru lagi yang berisi detail dari baris yang kita klik hehehe kira-kira kek gitu dah.
berhubung baru tau baris tabel bisa “dibegituin” yaudah jadi pengen nyoba deng walo dengan hasil yang jauuuuhhh bangat dari aselinya :p tapi lumayanlahh mirip-mirip pungsionalitasnya hahahaaa gaya.

okeh langsung aja menuju baris-baris kegalauan kode saya berikut, semoga bermanfaat 😀 .

1. buat file baru, kasih nama apa aja terserah :p yang penting ekstensionnya .php

<!Doctype html>
<html>
<head>
<title>Dynamic TR onClick
</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> -->
<style>

.table-master{
      vertical-align: top;
      border: solid 1px #fff;
      border-spacing: 0;
      border-collapse: collapse;
      width: 100%;
}
.table-master td{
      border: solid 1px #fff;
      padding: 10px;
/*       height: 50px; */
}
.table-master tr.tr-click:hover{
      background-color: #E9FFD1;
      cursor: pointer;
}
.table-master tr.selected{
      background-color: #E9FFD1;
/*       background-color: #9FFF38; */
}
.table-master tr.new{
      background-color: #FFFFBB;
}
.table-master tr.head{
      font-family: "Comic Sans MS", cursive, sans-serif;
      font-size: 14px;
      text-align: center;
      background-color: #8564D7;
      color: #fff;
}

tr:nth-child(odd){ background-color: #9FFF38; }
tr:nth-child(even){ background-color: #C4FF85; }

</style>
</head>
<body>

<table id="tbl-master" class="table-master">
  <thead>
    <tr class="head">
      <td>
	<strong>USERNAME</strong>
      </td>
      <td>
	<strong>PASSWORD</strong>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr class="tr-click" link="json_data.php">
      <td>
	HariJadi
	<br>
	<br>
	<br>
	<input class="data-satu" type="hidden" value="12">
	<input class="data-dua" type="hidden" value="2015-03-11">
      </td>
      <td>
	1$%nvaSD/{*112aAHD-[^76%$#,'+AJ*7masnd
	<br>
	<br>
	<br>
      </td>
    </tr>

    <tr class="tr-click" link="json_data.php">
      <td>
	Hari
	<br>
	<br>
	<br>
	<input class="data-satu" type="hidden" value="13">
	<input class="data-dua" type="hidden" value="2015-03-12">
      </td>
      <td>
	1$%nvasd/{*9ajs^76%$#,'+AJ*7masnd
	<br>
	<br>
	<br>
      </td>
    </tr>
    
    <tr class="tr-click" link="json_data.php">
      <td>
	<input class="data-satu" type="hidden" value="14">
	<input class="data-dua" type="hidden" value="2015-03-13">
	Jadi
	<br>
	Kali ini saya ingin mengungkapkan
	<br>
	perasaan saya ini
	
      </td>
      <td>
	2$%NVaxa/{*9ajs^76%$#,'+AJ*7masnd
	<br>
	<br>
	<br>
      </td>
    </tr>
    
  </tbody>
</table>

<script type="text/javascript">
	var tblmaster = $('#tbl-master');
// 	$('#tbl-master tbody tr').on('click', function(){
	$('.tr-click').on('click', function(){
	
	    var addtr = $(this),
		link = addtr.attr("link"),
		datasatu = addtr.find('.data-satu').val(),// get input data,
		datadua = addtr.find('.data-dua').val();// get input data
		    
	    $.ajax({
		type: 'POST',
		url: link,
		data: {satu: datasatu, dua: datadua},
		beforeSend: function(){
		    $('#tr-new').remove(); //hapus
		    tblmaster.find('tr').removeClass('selected');
		    $('<tr id="tr-load"><td colspan="2"> Loading.... </td></tr>').insertAfter(addtr);
		},
		success: function(data){
		    var json = JSON.parse(data);
		    $('<tr id="tr-new" class="new"><td colspan="2"><pre>ID : '+json.satu+'<br><!--</td><td>-->JOIN : '+json.dua+'</pre></td></tr>').insertAfter(addtr);
		    addtr.addClass('selected');
		    $('#tr-load').remove();
		}
	    });
	    
	});
    
</script>
</body>
</html>

2. langkah terakhir, sedih emang kalo denger kata terakhir kek gini, jadi kingetan ama nasib uang 50.000 terakhir yang didompet kemarin, kasian jadinya sama si-dompet hahahaa ngaco. untuk file terakhir ini buat namanya json_data.php aja deh biar kalian ga perlu edit-edit file no.1 tadi hahahaaa emang mau ngedit script acak-acakan kek gitu?? :p

<?php
$data = $_POST;
echo json_encode($data);

lohh kok file no-2 pendek amat scriptnya??
yaaa kalo kalian mau edit-edit biar nambah ribet ya sok aja hahahaaa.

fiuhhhh….akhirnya kelar juga curhatan saya ini ehh catatan kecil ini maksudnya.
byee.

Advertisements
This entry was posted in php. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s