<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading"><h4>Hover text lines and click pencil icon to edit</h4></div>
<div class="panel-body">
<table class="table table-striped">
<tr><td><div class="Editble">
<span id="Name_1">Some Text to edit</span>
<i class="fa fa-pencil" onclick="EditMyText('Name', 'Some Text to edit', 1);"></i>
</div></td></tr>
<tr><td><div class="Editble">
<span id="Name_2">Some Text to edit</span>
<i class="fa fa-pencil" onclick="EditMyText('Name', 'Some Text to edit', 2);"></i>
</div></td></tr>
<tr><td><div class="Editble">
<span id="Name_3">Some Text to edit</span>
<i class="fa fa-pencil" onclick="EditMyText('Name', 'Some Text to edit', 3);"></i>
</div></td></tr>
<tr><td><div class="Editble">
<span id="Name_4">Some Text to edit</span>
<i class="fa fa-pencil" onclick="EditMyText('Name', 'Some Text to edit', 4);"></i>
</div></td></tr>
<tr><td><div class="Editble">
<span id="Name_5">Some Text to edit</span>
<i class="fa fa-pencil" onclick="EditMyText('Name', 'Some Text to edit', 5);"></i>
</div></td></tr>
</table>
</div>
</div>
<small>Created by <a href="http://tobi1.dk">Tobias Gram</a> - Free to use</small>
</div>
</div>
.Editble .fa-pencil {
display: none;
cursor:pointer;
margin-left:5px;
}
.Editble:hover .fa-pencil {
display: inline-block;
}
.Editble span:hover .fa-pencil {display: inline-block;}
.Editble input:hover .fa-pencil {display: none;}
.input-edit {width:94%;display:inline;}
.panel-body {padding:0px;}
.table {margin-bottom:0px;}
function EditMyText(Name, Text, ID) {
$('#'+Name+'_'+ID).next(".fa-pencil").remove();
var ToggleText = $('#'+Name+'_'+ID).html();
var OutputHTML = '<div class="form-group">';
OutputHTML = OutputHTML+'<input class="form-control input-edit" id="Input'+Name+'_'+ID+'" value="'+Text+'" />';
OutputHTML = OutputHTML+'<a href="javascript:Update(\''+Name+'\', '+ID+');" type="button" class="btn btn-sm btn-success">';
OutputHTML = OutputHTML+'<i class="fa fa-check"></i></a></span>';
OutputHTML = OutputHTML+'<a href="javascript:CancelEdit(\''+Name+'\', '+ID+');" type="button" class="btn btn-sm btn-danger">';
OutputHTML = OutputHTML+'<i class="fa fa-ban"></i></a></span>';
OutputHTML = OutputHTML+'</div>';
$('#'+Name+'_'+ID).html(OutputHTML);
if (ToggleText==OutputHTML) {
$('#'+Name+'_'+ID).html(Text);
}
}
function Update(Name, ID) {
var Text = $("#Input"+Name+"_"+ID).val();
$.post("#", {PostID: ID, PostText: Text},
function(data,status){
$('#'+Name+'_'+ID).html(Text);
$('#'+Name+'_'+ID).parent( "div" ).append('<i class="fa fa-pencil" onclick="EditMyText(\'Name\', \''+Text+'\', '+ID+');"></i>');
});
}
function CancelEdit(Name, ID) {
var Text = $("#Input"+Name+"_"+ID).val();
$('#'+Name+'_'+ID).html(Text);
$('#'+Name+'_'+ID).parent( "div" ).append('<i class="fa fa-pencil" onclick="EditMyText(\'Name\', \''+Text+'\', '+ID+');"></i>');
}
