Jika kita adalah orang yang berkutat dengan dunia IT terutama bidang aplikasi web programming, pasti akan sering menjumpai proses insert, update, delete terhadap data dalam database, begitu juga dengan manipulasi tampilan table yang menampilkan data – data tersebut dalam script html yang kemudian dapat dilihat dalam browser.
Berikut kita akan coba membahas mengenai proses “Add New Row” dan “Delete Row” terhadap suatu table dalam web-app menggunakan javascript, kenapa kita menggunakan javascript? Karena dengan kelebihan yang dimiliki oleh javascript memungkinkan kita untuk melakukan proses memasukkan baris baru atau menghapus baris dalam table tanpa melalui proses refresh, sehingga effort loading yang diperlukan untuk berinteraksi dengan server cukup sekali, jika proses edit data yang kita lakukan terhadap table tersebut selesai, dan data yang diinginkan untuk masuk ke database sudah benar maka interaksi dengan server dilakukan hanya untuk proses insert data.
Sekarang akan kita coba bahas tahapan yang harus dilakukan untuk membuat proses tersebut, sebagai basic kita akan coba membangunnya diatas php, untuk diketahui sebenarnya proses ini dapat dilakukan dalam berbagai web programming baik itu php, jsp, java ataupun dotnet, tetapi untuk saat ini kita hanya akan membahasnya diatas php. Sebagai permulaan kita buat dulu sebuah file *.php untuk membentuk tampilan awal dari table dan link action yang akan dilakukan, baik itu link untuk menambah baris dan menghapus baris. Dengan script sebagai berikut:
<html>
<head>
<title>Dynamic Table, Add / Delete Row</title>
</head>
<body>
<div class="area">
<div class="toolbar-clean">
<a href="javascript:addNewRow();"><span>New Row</span></a>
<a href="javascript:deleteRow();"><span>Delete Row</span></a>
</div>
<table width="80%" cellpadding="0" cellspacing="0" border="1" id="lineItemTable">
<tr>
<th width="0%"> </th>
<th width="2%" align="center">
<input type="checkbox" name="checkMaster" id="checkMaster" onClick="clickAll();"/>
</th>
<th width="24%">Nomor Induk</th>
<th width="24%">Nama Siswa</th>
<th width="50%">Alamat Lengkap</th>
</tr>
</table>
</div>
</body>
</html>
Dari script diatas maka akan menghasilkan tampilan browser sebagai berikut:
Setelah kita dapatkan tampilan awal dari proses yang akan kita inginkan sebagai tahapan berikutnya, akan kita lakukan penambahan kode javascript ke dalam file php tersebut untuk memenuhi kebutuhan dari action “New Row” dan “Delete Row” yang akan kita sisipkan ke dalam tag script, yang pertama akan kita buat adalah function untuk New Row dengan nama function “addNewRow” disertai dengan seluruh function turunannya sebagai berikut:
function addNewRow() {
var tbl = document.getElementById("lineItemTable");
var row = tbl.insertRow(tbl.rows.length);
var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td0.appendChild(generateIndex(row.rowIndex));
td1.appendChild(generateCheckBox(row.rowIndex));
td2.appendChild(generateNomorInduk(row.rowIndex));
td3.appendChild(generateNomorRegister(row.rowIndex));
td3.appendChild(generateNamaSiswa(row.rowIndex));
td4.appendChild(generateItemName(row.rowIndex));
row.appendChild(td0);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
}
function generateIndex(index) {
var idx = document.createElement("input");
idx.type = "hidden";
idx.name = "index[ ]";
idx.id = "index["+index+"]";
idx.value = index;
return idx;
}
function generateCheckBox(index) {
var check = document.createElement("input");
check.type = "checkbox";
check.name = "check[ ]";
check.id = "check["+index+"]";
return check;
}
function generateNomorInduk(index) {
var idx = document.createElement("input");
idx.type = "text";
idx.name = "nomorInduk[ ]";
idx.id = "nomorInduk["+index+"]";
idx.size = "15";
return idx;
}
function generateNomorRegister(index) {
var idx = document.createElement("input");
idx.type = "hidden";
idx.name = "nomorRegister[ ]";
idx.id = "nomorRegister["+index+"]";
return idx;
}
function generateNamaSiswa(index) {
var idx = document.createElement("input");
idx.type = "text";
idx.name = "namaSiswa[ ]";
idx.id = "namaSiswa["+index+"]";
idx.size = "25";
return idx;
}
function generateItemName(index) {
var itemName = document.createElement("input");
itemName.type = "text";
itemName.name = "alamatSiswa[ ]";
itemName.id = "alamatSiswa["+index+"]";
itemName.size = "40";
return itemName;
}
Dari contoh code javascript diatas dapat kita lihat suatu proses untuk membuat baris baru yang akan di generate jika link “New Row” seperti pada gambar diatas di Klik, susunan kolom yang akan generate telah disesuaikan dengan susunan header, sehingga jika proses telah dieksekusi maka tampilan dalam browser akan seperti gambar dibawah, dan baris baru akan terus bertambah jika link “New Row” terus di klik.
Setelah hasil seperti gambar diatas didapat maka tahapan dilanjutkan dengan menambahkan function ceklist semua checkbox yang ada dalam table sehingga jika kita ingin melakukan suatu action terhadap seluruh baris dalam tabel, kita tidak perlu direpotkan dengan harus melakukan ceklist satu per satu semua checkbox yang ada dalam tabel tersebut, function untuk melakukan proses tersebut sebagai berikut.
function clickAll() {
var checked = false;
if (document.getElementById("checkMaster").checked == true)
checked = true;
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
node.checked = checked;
}
}
Jika function “clickAll” yang sudah disisipkan ke source html dibawah source javascript sebelumnya, maka element checkbox yang terdapat di header dapat diasumsikan sudah berfungsi dengan baik. Dan jika checkbox tersebut diklik maka akan menghasilkan tampilan browser seperti berikut. Dapat kita lihat perbedaan yang dihasilkan dari gambar3 dan gambar2 dimana checkbox nya terclick dan tidak.
Dan tahapan terakhir yang harus dilakukan adalah menambahkan function “deleteRow” yang berfungsi untuk menghapus kembali baris dari tabel yang tidak diperlukan, fungsi ini juga dapat digunakan untuk menghapus seluruh baris dalam tabel tersebut dengan syarat seluruh checkbox dalam baris tabel dalam kondisi ceklist aktif. Javascript code sebagai berikut.
function deleteRow() {
var tbl = document.getElementById("lineItemTable");
var error = false;
if (document.getElementById("checkMaster").checked == false)
error = true;
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
if (node.checked == true) {
error = false;
break;
}
}
if (error == true) {
alert ("Checkbox tidak di cek, proses tidak dapat dilanjutkan");
return;
}
if (document.getElementById("checkMaster").checked == true) {
deleteAll();
document.getElementById("checkMaster").checked = false;
} else {
var table = document.createElement("table");
bufferRow(table);
deleteAll();
reIndex(table);
}
}
function deleteAll() {
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length - 1;
for (var idx = rowLen; idx > 0; idx--)
tbl.deleteRow(idx)
}
function bufferRow(table) {
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx=1;idx<rowLen;idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
if (node.checked == false) {
var rowNew = table.insertRow(table.rows.length);
var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td0.appendChild(row.cells[0].lastChild);
td1.appendChild(row.cells[1].lastChild);
td2.appendChild(row.cells[2].lastChild);
td3.appendChild(row.cells[3].firstChild);
td3.appendChild(row.cells[3].lastChild);
td4.appendChild(row.cells[4].lastChild);
rowNew.appendChild(td0);
rowNew.appendChild(td1);
rowNew.appendChild(td2);
rowNew.appendChild(td3);
rowNew.appendChild(td4);
}
}
}
function reIndex(table) {
var tbl = document.getElementById("lineItemTable");
var rowLen = table.rows.length;
for (var idx=0;idx < rowLen;idx++) {
var row = table.rows[idx];
var rowTbl = tbl.insertRow(tbl.rows.length);
var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
td0.appendChild(row.cells[0].lastChild);
td1.appendChild(row.cells[1].lastChild);
td2.appendChild(row.cells[2].lastChild);
td3.appendChild(row.cells[3].firstChild);
td3.appendChild(row.cells[3].lastChild);
td4.appendChild(row.cells[4].lastChild);
rowTbl.appendChild(td0);
rowTbl.appendChild(td1);
rowTbl.appendChild(td2);
rowTbl.appendChild(td3);
rowTbl.appendChild(td4);
}
}
Dari javascript function “deleteRow” diatas dapat kita lihat sebelum fungsi tersebut melakukan perintah delete pada baris perintah 04 sampai 22 dicodekan perintah validasi untuk memeriksa apakah seluruh element checkbox di ceklist atau tidak, minimal jika 1 saja checkbox kondisi ceklist maka perintah menghapus baris dapat dilaksanakan, tetapi jika tidak ada satupun checkbox yang ceklist maka proses dihentikan dan akan menampilkan tampilan di browser seperti berikut.
Mungkin saat ini hanya sekian ilmu yang bisa saya bagi dengan pembaca semoga bermanfaat, jika ada kekurangan atau masukan yang dapat meningkatkan kemampuan jangan sungkan untuk memberikan komentar, berikut source code lengkap dari proses diatas dalam satu file berupa file pdf yang dapat diambil di Source Code.
permainan javascript yang menarik
Terbaik Boz…
Hatur nuhun pisan kang Agien….
waw! i need this so much!
thanks a lot, pak!
Wah pak.
salam kenal.. terimakasih atas infonya di php ug
wah hebat banged neh maen2 javascripnya.
top markotop good mar so good, thanks for share your knowledge to us
thanks
mas sebelumnya saya berterima kasih terhadap mas karena sudah mengajarkan saya dan anak2 indonesia lainnya.namun yang saya ingin tanyakan adalah bagaimana jika insert,edit dan hapus dijadikan satu.saya awam dengan fungsi mas.apa saya harus belajar fungsi dulu?bagaimana jika saya ingin mengembangkan source yang telah mas buat.trima kasih banyak atas perhatiannya.salam indonesia open source
terima kasih kembali.. tampaknya tidak ada masalah klo mau digabung juga.. silakan dicoba di modifikasi aza.. tampak klo utk javascript lebih baik kenali dulu konsep fungsi.. dikarenakan jika kita sudah terbiasa dengan coding yang terstruktur dan oop.. tampaknya utk men-trace error lebih mudah.. ketimbang tdk dikelompokkan berdasarkan fungsi.. soal pengembangan lebih lanjut itu sih bebas2 aza.. tapi baiknya klo ada pengembangan terbaru.. sy juga dikasih tau.. biar ilmu sy pun ter-update..
mantabb buangedd bozz.. dah dari dulu pengen bikin yg kaya gini
javascript ini berlaku gak utk data yg memunculkan dr database?
maksud saya, function delete row ini bisa sekaligus menghapus data di database tdk klo data di table berasal dr database?
@du
bisa.. sebenernya script ini sebagian dari script sebuah aplikasi yg kembangkan utk client 1 thn lalu.. aslinya lebih lengkap dr ini.. dan dapat menghapus data langsung ke database.. tp lewat proses submit terlebih dahulu…
mungkin dengan sedikit modifikasi bisa kali ya ngedelete data langsung tanpa melalui proses submit.. dgn ditambah AJAX-JSON..
Mangstab, tapi klo mo nambahin field lagi gimana ya bos , aku modif di javascriptnya error mulu,thanks
@rumput_hijau
=> mungkin bisa liat hasil editannya…? biar bisa kasih masukan….
Makasih akhirnya bisa juga bos nambahin fieldnya tapi klo mo masukin ke database gimana ya sooalnya data yang di posting tu kan array ya , sorry nubie ni..
kalo misal nama variable arraynya “namaorang” dan submit nya menggunakan method=post, trus menggunakan datababase localhost, schema latih, user name = root dan password admin, dan menggunakan table di database misal menggunakan tabel_siswa, kira2 contohnya akan seperti ini..
$link = mysql_connect('localhost', 'root', 'admin');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
$link1 = mysql_select_db('latih');
if (!$link1) {
die('Could not select database');
}
$table = 'tbl_siswa';
$namaorang = $_POST['namaorang'];
if (is_array($namaorang)) {
for ($i = 0; $i < count($namaorang); $i++) {
mysql_query("LOCK TABLES " . $table . " WRITE;");
mysql_query("INSERT INTO " . $table . " (nama) VALUES ('$namaorang[$i]');");
mysql_query("UNLOCK TABLES;");
}
}
untuk lebih lengkap tentang insert bisa diliat disini..
http://gienvision.wordpress.com/2008/07/01/insert-data-menggunakan-database-mysql-postgresql-oracle/
Makasih banget bos akhirnya bisa juga ni…, klo bisa tambain juga tutorial ajax-nya
gileeeee, mantap banget coy, selamat yaaaahhhh
@amal: selamat apa mal…? selamat menempuh hidup baru…? hehehe
mas, saya kesulitan waktu inputan textbox mau saya modifikasi jadi radiobutton. berikut script hasil modifikasi saya:
function generateSertifikat2(index) {
var idx = document.createElement(“input”);
idx.type = “radio”;
idx.name = “sertifikat[ ]“;
idx.id = “sertifikat["+index+"]“;
idx.size = “5″;
idx.value = “ADA”;
return idx;
}
hasilnya hanya menampilkan radiobutton tanpa teks dan tidak bisa dipilih. mohon pencerahannya. trims.
@andi: boleh kirim source code yg lebih lengkap yg sudah di modifikasi nya ke sy…? biar sy bisa analisa lebih jauh….??
Sorry banyak nanya..
Aku ada kasus mungkin mirip inputannya seperti diatas tapi klo misalnya input nip otomatis keluar namanya,sedangkan bentuknya dinamic table, ada saran,ide atau contohnya mas
Terima kasih atas reply-nya
@rumput_hijau: bisa… gabungkan aza teknik dynamic table di atas dengan teknik ajax, biar lebih gampang.. bisa menggunakan jquery atau dwr (utk java – jsp)… gampang koq… selamat mencoba…
Dah aku coba tapi masalahnya kan id element-nya dynamic juga ,jadi cuma baris yang pertama aja yang bisa, ada saran mas..
Bisa koq… cuman memang harus lebih teliti ngehandle dynamic id dr setiap element nya…. di project2 terakhir sy menggunakan java – jsp begitu ada kebutuhan dynamic table yg ada automatic input, menggabungkan script dynamic table yg sy buat dengan DWR (ajax utk java – jsp) dan berfungsi dgn baik… ini hanya masalah teliti dan sabar aza koq…. selamat mencoba….
mas, saya buat dinamic row menggunakan java juga, untuk proses penambahan row dah hapus row bisa berjalan, tapi yang jadi masalah kok gak bisa jalan di semua browser, hanya bisa jalan di IE, bagaimana agar bisa jalan di semua browser ya mas… kalo ada waktu mohon add YM saya dg id nursigits, nanti saya kirimkan coding nya di sana.. makasih mas…
@sigit: seharusnya sih jalan disemua browser mas… soalnya sy dulu waktu bikin script ini nyoba nya pake firefox… justru td nya sy sempet ragu klo di IE jalan apa ngak…. soalnya biasanya browser yg suka beda sendiri itu IE….
Pak agien, saya mencoba menggunakan proses penyimpanan dari dinamic row diatas dengan cara sperti ini :
$kodePNS = $_GET['_kodePNS'];
echo (“kodePNS : $kodePNS”);
$myNIP = getNIP($kodePNS);
echo (“myNIP : $myNIP”);
$index = $_POST['index[$i]‘];
$check = $_POST['check[$i]‘];
$NamaPerusahaan = $_POST['NamaPerusahaan[$i]‘];
$Jabatan = $_POST['Jabatan[$i]‘];
$masaKerja = $_POST['masaKerja[$i]‘];
$tanggal = $_POST['tanggal[$i]‘];
// INSERT DATA LOOPING
if (is_array($index)){
echo count ($index).”";
for ($i = 0; $i < count($index); $i++) {
echo $index[$i]." ".$NamaPerusahaan[$i]." ".$Jabatan[$i]." ".$masaKerja[$i]."".$tanggal[$i]."”;
$query = sprintf(“INSERT INTO tpegawai_pengalaman (kode_pns,nama_perusahaan,jabatan,masa_kerja_tahun,tgl_mulai_kerja,created_on,created_by)
VALUES (‘$kodePNS’,'$NamaPerusahaan[$i]‘,’$Jabatan[$i]‘,’$masaKerja[$i]‘,’$tanggal[$i]‘,now(),’$_SESSION[user_id]‘)”
);
$res = mysql_query($query) or die(mysql_error());
}
}
@mysql_close($conn);
tapi kok gak terpanggil datanya ya pak….
Thanks berat brogh….it works…!!!!
sama2… bro…
pak, saya sudah mencoba melakukan script bapak, kenapa reindexnya gak jalan ya pak. sebagai contoh saya sudah add-row 5 baris
——-1
——-2
——-3
——-4
——-5
saya menghapus baris ketiga(3),
maka indeksnya akan menjadi
——–1
——–2
——–4
——–5
apabila saya ngin mebuat indeksnya menjadi
——-1
——-2
——-3
——-4
bagaimana pak? terimakasih.
Mau tanya pak, kalau saya mau bikin
function generateNamaSiswa(index) {
var idx = document.createElement(“SELECT”);
var op1 = document.createElement(“OPTION”);
var op2 = document.createElement(“OPTION”);
var op3 = document.createElement(“OPTION”);
idx.name = “namaSiswa[ ]“;
idx.id = “namaSiswa["+index+"]“;
op1.setAttribute(“VALUE”,”Japan1″);
op2.setAttribute(“VALUE”,”Ind”);
op3.setAttribute(“VALUE”,”Korea”);
idx.appendChild(op1);
idx.appendChild(op2);
idx.appendChild(op3);
return idx;
}
Kenapa option value nya gk keluar ya? apa ada yang salah? tolong bantuannya, terimakasih sebelumnya..
Mas,
Kayanya perlu ditambahin dikit lagi.
Kalo checkbos “check all” di-klik, lalu uncheck pada baris datanya, kemudian tekan “Delete Row”, masih terhapus semua.
Bantuin dong mas. Tanggung nih.
Makasih ya mas.
wah manteb nih
saya lg beruntung..dpt referensi yg pas banget sm tgs final sy “simulasi penginputan menggunakan tabel”
gini masbro….tabel yg buat adlh simulasi tabel kebenaran (logika informatika)…mengenai penambahan n edit fieldx gak ada masalah
cuman ada masalah pada field output simulasi yg sy buat…penugasan tru n false dari inputanx..misal 1 konjungsi 1 maka pada field output menghasilkan 1 (true)……rencanax sy gunakan button untuk eventx….ambil string dari input lalu dipecah menjadi array sehingga dapat dilakukan operasi yang diinginkan ….tolong pencerahan javascript kk….
mas, kalau isi tablenya mau disimpan ke database gimana caranya ?
Terima kasih sebelumnya
@mattawang91 maaf mas, saya kurang nangkap kalo hanya mendapat penjelasan seperti itu, jika ada source code sy bisa lebih memahami lewat source code
@sidi: waktu saya buat tulisan ini saat itu saya blom mengenal ajax, saat itu saya simpan isi table nya ke element textfield yang dibuat array, sehingga value dari textfield tersebut dapat dibaca dari php, nah proses penyimpanannya di script phpnya. sedangkan jika menggunakan ajax bisa diambil nilai2 per element text box menggunakan ajax, nah ajax yang menjadi penghantar data ke server side, ditangkap oleh script php kemudian didalam script php itu proses simpan ke databasenya.