Menambah dan menghapus kolom tabel dengan Javascript
Jika ingin menggunakan javascript untuk membuat tabel yang bisa di tambah dan di kurangi oleh client, cara kerjanya jadi misalkan di pilih tombol tambah kolom maka kolom tabel akan bertambah, jika di ceklist di kolom yang akan di hapus dan klik hapus kolom maka kolom yang di beri checklist akan di hapus. seperti di bawah :
.
Kolom1 | Kolom2 | Kolom3 | Kolom4 | |
---|---|---|---|---|
Kode tabel :
<table id="tabel-update-part">
<tbody>
<tr>
<th></th><th>Kolom1</th><th>Kolom2</th><th>Kolom3</th><th>Kolom4</th>
</tr>
<tr>
<td><input name="chk" type="checkbox" /></td><td><input name="kol1[]" type="text" /></td><td><input name="kol2[]" type="text" /></td><td><input name="kol3[]" type="text" /></td><td><input name="kol4[]" type="text" /></td>
</tr>
</tbody></table>
<tbody>
<tr>
<th></th><th>Kolom1</th><th>Kolom2</th><th>Kolom3</th><th>Kolom4</th>
</tr>
<tr>
<td><input name="chk" type="checkbox" /></td><td><input name="kol1[]" type="text" /></td><td><input name="kol2[]" type="text" /></td><td><input name="kol3[]" type="text" /></td><td><input name="kol4[]" type="text" /></td>
</tr>
</tbody></table>
.
Kode Tombol :
<button class="button-tambah-hapus" onclick=" return tambahbaris('tabel-update-part')">Tambah Kolom</button>
<button class="button-tambah-hapus" onclick="return hapusbaris('tabel-update-part')">Hapus Kolom</button>
Kode Javascript :
function tambahbaris(tabel){
var tabel = document.getElementById("tabel-update-part");
var bacabaris = tabel.rows.length;
var bacakolom = tabel.rows[0].cells.length;
var tambahbaris = tabel.insertRow(bacabaris);
for(var i=0;i<bacakolom;i++){
var cellbaru = tambahbaris.insertCell(i);
var isicell = tabel.rows[1].cells[i].innerHTML;
cellbaru.innerHTML=isicell;
}
return false;
}
function hapusbaris(tabel){
var tabel = document.getElementById("tabel-update-part");
var bacabaris = tabel.rows.length;
for(var i=0;i<bacabaris;i++){
//baca baris yang ke i
var bacabarisyangke = tabel.rows[i];
//baca ceklist di childnode cell ke 0
var bacaceklist = bacabarisyangke.cells[0].childNodes[0];
//jika ada ceklist
if(null != bacaceklist && true == bacaceklist.checked){
tabel.deleteRow(i);
bacabaris--;
i--;
}
}
return false;
}
Untuk membaca nilai dari input yang di lewatkan form dengan PHP dari tabel di atas silakan baca posting : Cara melewatkan 2 ID di post
atau seperti kode berikut
$nama = $_POST['nama'];
$notelp = $_POST['notelp'];
foreach ($nama as $array => $nilai) {
# code...
echo $nama[$array];
echo $notelp[$array];
echo "<br>";
}
ini dia yg dicari.....jalan-jalan ke Blackberry Service Centreyah
ReplyDeletesssiap gaaannn (o)
Deletetks gan, walaupun gak bisa dicopas tapi masih bisa di CTRL+U :)
ReplyDeletemakasih tutorial nya ini yg sedang sy cari2..
nice, semoga bermanfaat ilmunya :>)
DeleteWow, cool post. I'd like to write like this too - taking time and real hard work to make a great article... but I put things off too much and never seem to get started. Thanks though. kolpac
ReplyDelete