Berikut script lengkapnya.
Maaf ya om, tante, kakak, mba, teteh, scriptnya berantakan, maklum masih pemula hehe.
mudah-mudahan manfaat.
<!DOCTYPE html>
<html lang="en">
<head>
<title>edit kolom table jquery </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.modal_edit_kolom {width:80%;}
.edit_kolom{cursor: pointer;}
.border_table{border: 2px solid; padding:10px; margin:12px;}
</style>
<script>
$(document).ready(function(){
$(".edit_kolom").dblclick(function(){
var get_id = $(this).attr("id");
var text_kolom = $("#"+get_id).html();
var x=$("#input_edit"+get_id).html();
if (x === undefined) {
$("#"+get_id).html("<input type='text' id='input_edit"+get_id+"' ><span onclick='ganti_text(this)' edit_id='"+get_id+"' id='submit"+get_id+"' class='btn btn-xs btn-primary submit_edit'>Submit</span>");
$("#input_edit"+get_id).val(text_kolom);
}
});
});
function ganti_text(get){
var id_kolom = $(get).attr("edit_id");
var text_edit = $("#input_edit"+id_kolom).val();
$("#"+id_kolom).html(text_edit);
//JIKA PERLU UPDATE KE DATABASE GUNAKAN AJAX DISINI
}
function Edit_kolom(edit_data) {
$(edit_data).css("background","#D5f5f5");
}
function simpan_edit_kolom(edit_data) {
$(edit_data).css("background","#FDFDFD");
$("#status_edit").html("data "+edit_data.innerHTML+" berhasil diupdate");
//JIKA PERLU UPDATE KE DATABASE GUNAKAN AJAX DISINI
}
</script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal_edit_kolom">Klik disini untuk demo edit kolom table jquery </button>
<!-- Modal -->
<div id="modal_edit_kolom" class="modal fade" role="dialog">
<div class="modal-dialog modal_edit_kolom">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">inline edit column table jquery</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 border_table">
<h4 style="color: green;">Silahkan double click kolom yang akan di edit</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td class="edit_kolom" id="r1c1">kiki</td>
<td class="edit_kolom" id="r1c2">lutfie</td>
<td class="edit_kolom" id="r1c3">kiki@example.com</td>
</tr>
<tr>
<td class="edit_kolom" id="r2c1">Mary</td>
<td class="edit_kolom" id="r2c2">Moe</td>
<td class="edit_kolom" id="r2c3">mary@example.com</td>
</tr>
<tr>
<td class="edit_kolom" id="r3c1">July</td>
<td class="edit_kolom" id="r3c2">Dooley</td>
<td class="edit_kolom" id="r3c3">july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-12">
<div class="col-sm-12 border_table">
<h4 style="color: green;">Silahkan klik kolom yang akan di edit</h4>
<h4 id="status_edit" style="color: blue;"></h4>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r1c1">kiki</td>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r1c2">lutfie</td>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r1c3">kiki@example.com</td>
</tr>
<tr>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r2c1">Mary</td>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r2c2">Moe</td>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r2c3">mary@example.com</td>
</tr>
<tr>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r3c1">July</td>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r3c2">Dooley</td>
<td contenteditable="true" onblur="simpan_edit_kolom(this)" onClick="Edit_kolom(this);" id="2r3c3">july@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar