Dalam membuat aplikasi kita mungkin menemukan suatu form entry yang jumlahnya tidak bisa kita tebak. Sebagai contoh input data penjualan atau input data pembelian. Pada contoh ini kita pertama-tama kita akan menampilkan 5 baris, jika ternyata form entrian kita lebih dari lima baris maka kita akan menambah baris dengan tombol ‘Tambah Baris’. Kita melakukan programming dengan menggunakan jQuery sehingga tidak perlu refresh data ke server.
Untuk lebih memberikan gambaran silahkan melihat tampilan berikut ini:
Kita membuat tabel dengan thead, tbody dan tfoot. Kemudian kita akan menambah baris dengan function seperti di bawah ini:
function tambah_baris()
{
html='<tr>’
+ ‘<td><input type=”text” name=”no[]”></td>’
+ ‘<td><input type=”text” name=”item[]”></td>’
+ ‘<td><input type=”text” name=”jml[]”></td>’
+ ‘</tr>’;
$(‘#tabelku tbody’).append(html);
}
Demo dapat dilihat di http://aris.proweb.asia/tambah_baris_table.html .
Source code lengkapnya adalah seperti berikut ini:
<html>
<head>
<title>Tambah baris dengan jQuery</title>
<script src=”development-bundle/jquery-1.6.2.js”>
</script>
<script>
function tambah_baris()
{
html='<tr>’
+ ‘<td><input type=”text” name=”no[]”></td>’
+ ‘<td><input type=”text” name=”item[]”></td>’
+ ‘<td><input type=”text” name=”jml[]”></td>’
+ ‘</tr>’;
$(‘#tabelku tbody’).append(html);
}
</script>
</head>
<body>
<table border=”1″ id=”tabelku”>
<thead>
<tr>
<td>No</td>
<td>Item</td>
<td>Jml</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type=”text” name=”no[]”></td>
<td><input type=”text” name=”item[]”></td>
<td><input type=”text” name=”jml[]”></td>
</tr>
<tr>
<td><input type=”text” name=”no[]”></td>
<td><input type=”text” name=”item[]”></td>
<td><input type=”text” name=”jml[]”></td>
</tr>
<tr>
<td><input type=”text” name=”no[]”></td>
<td><input type=”text” name=”item[]”></td>
<td><input type=”text” name=”jml[]”></td>
</tr>
<tr>
<td><input type=”text” name=”no[]”></td>
<td><input type=”text” name=”item[]”></td>
<td><input type=”text” name=”jml[]”></td>
</tr>
<tr>
<td><input type=”text” name=”no[]”></td>
<td><input type=”text” name=”item[]”></td>
<td><input type=”text” name=”jml[]”></td>
</tr>
</tbody>
<tfoot>
<td colspan=”3″><input type=”button” value=”Tambah Baris” onclick=”tambah_baris()” /></td>
</tfoot>
</table>
</body>
</html>
Kunjungi www.proweb.co.id untuk menambah wawasan anda.