Free Source Code Tambah Hapus Data HTML
SOURCE CODE TAMBAH HAPUS DATA HTML
Silahka copas sourcode di bawah ini dan jalan kan di aplikasi perangkat anda .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Tambah & Hapus Field Dinamis </title>
<!-- Link CSS Bootstrapt 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Link CSS Font Awessom -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Jquery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<center>
<div class = "w-50" style="margin-top:10%;">
<table border = "0" class="table table-bodered mt-5 text-center table-hover">
<thead>
<tr>
<th> Nama Lengkap </th>
<th> Nama Panggilan </th>
<th> <button type="button" id="additem" class="btn btn-primary btn-sm "> <i class="fa fa-plus"></i> Tambah Item</button> </th>
</tr>
</thead>
<!-- Hasil Tambah -->
<tbody id="tabel_item" ></tbody>
</table>
<button type="submit" name="save" class="btn btn-success pull-center-right w-15"><i class="fa fa-save"></i> Simpan Data </button>
</div>
</center>
</body>
<script>
$(document).ready(function() {
// menambahkan baris item dalam tabel
$("#additem").click(function() {
var html = '';
html += '<tr>';
html += '<td> <input type="text" class="form-control" name="nm_lengkap" id="" placeholder="Masukan Nama Lengkap"> </td>';
html += '<td> <input type="text" class="form-control" name="nm_panggilan" id="" placeholder="Masukan Nama Panggilan"> </td>';
html += '<td><button type="button" name="hapusitem" id="hapusitem" class="btn btn-danger btn-sm w-75"> <i class="fa fa-trash"></i> </button></td></tr>';
$('#tabel_item').append(html);
})
// menghapus baris item dalam tabel
$(document).on('click', '#hapusitem', function() {
$(this).closest('tr').remove();
})
});
</script>
</html>
Silahka copas sourcode di bawah ini dan jalan kan di aplikasi perangkat anda .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Tambah & Hapus Field Dinamis </title>
<!-- Link CSS Bootstrapt 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Link CSS Font Awessom -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Jquery 3 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<center>
<div class = "w-50" style="margin-top:10%;">
<table border = "0" class="table table-bodered mt-5 text-center table-hover">
<thead>
<tr>
<th> Nama Lengkap </th>
<th> Nama Panggilan </th>
<th> <button type="button" id="additem" class="btn btn-primary btn-sm "> <i class="fa fa-plus"></i> Tambah Item</button> </th>
</tr>
</thead>
<!-- Hasil Tambah -->
<tbody id="tabel_item" ></tbody>
</table>
<button type="submit" name="save" class="btn btn-success pull-center-right w-15"><i class="fa fa-save"></i> Simpan Data </button>
</div>
</center>
</body>
<script>
$(document).ready(function() {
// menambahkan baris item dalam tabel
$("#additem").click(function() {
var html = '';
html += '<tr>';
html += '<td> <input type="text" class="form-control" name="nm_lengkap" id="" placeholder="Masukan Nama Lengkap"> </td>';
html += '<td> <input type="text" class="form-control" name="nm_panggilan" id="" placeholder="Masukan Nama Panggilan"> </td>';
html += '<td><button type="button" name="hapusitem" id="hapusitem" class="btn btn-danger btn-sm w-75"> <i class="fa fa-trash"></i> </button></td></tr>';
$('#tabel_item').append(html);
})
// menghapus baris item dalam tabel
$(document).on('click', '#hapusitem', function() {
$(this).closest('tr').remove();
})
});
</script>
</html>
0 Response to "Free Source Code Tambah Hapus Data HTML "
Post a Comment