Tambah dan Hapus Baris Tabel dengan Javascript

Dengan menggunakan Javascript, kita bisa menambah dan menghapus baris tabel secara interaktif.

Berikut skripnya.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Tambah dan Hapus Tabel</title>

</head>

<script type="text/javascript">

function hapus()

{

document.getElementById("tabellatihan").deleteRow(0);

}


function tambah()

{

var tambah=document.getElementById("tabellatihan").insertRow(0);

var sel=tambah.insertCell(0);

sel.innerHTML='_';

}

</script>

<body>


<p>

<input type="submit" name="Submit" value="Tambah Baris" onclick="tambah()" />

<input type="submit" name="Submit2" value="Hapus Baris" onclick="hapus()" />

</p>

<table width="100%" border="5" id="tabellatihan">

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

</tr>

</table>

<p>&nbsp; </p>

</body>

</html>





Untuk membahas skrip ini bersama saya dan pengunjung lain silahkan isi kotak komentar yang berada di bawah artikel ini ^_^

1 komentar:

  1. Mau tanya dunk... kalo misalnya bikin 5 colom gimana caranya... saya dah coba" malah error.. di klik tambah gak berhasil..

    sebelumnya mohon maaf merepotkan...

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

Diberdayakan oleh Blogger.