<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table class="table" id="tableCompleted" border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
<th>Databased</th>
<th>Script</th>
<th>Programming</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laravel</td>
<td>PHP</td>
<td>MySQL</td>
<td>mysqli</td>
<td>Javascript</td>
</tr>
<tr>
<td>Java</td>
<td>c</td>
<td>c++</td>
<td>c#</td>
<td>Oracle</td>
</tr>
<tr>
<td>Mean.js</td>
<td>Android</td>
<td>IOS</td>
<td>Magento</td>
<td>HTML</td>
</tr>
</tbody>
</table>
<script>
$('td').on('click', function() {
var $this = $(this);
var $input = $('<input>', {
value: $this.text(),
type: 'text',
blur: function() {
$this.text(this.value);
},
keyup: function(e) {
if (e.which === 13) $input.blur();
}
}).appendTo($this.empty()).focus();
});
</script>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table class="table" id="tableCompleted" border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
<th>Databased</th>
<th>Script</th>
<th>Programming</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laravel</td>
<td>PHP</td>
<td>MySQL</td>
<td>mysqli</td>
<td>Javascript</td>
</tr>
<tr>
<td>Java</td>
<td>c</td>
<td>c++</td>
<td>c#</td>
<td>Oracle</td>
</tr>
<tr>
<td>Mean.js</td>
<td>Android</td>
<td>IOS</td>
<td>Magento</td>
<td>HTML</td>
</tr>
</tbody>
</table>
<script>
$('td').on('click', function() {
var $this = $(this);
var $input = $('<input>', {
value: $this.text(),
type: 'text',
blur: function() {
$this.text(this.value);
},
keyup: function(e) {
if (e.which === 13) $input.blur();
}
}).appendTo($this.empty()).focus();
});
</script>
</body>
</html>

EmoticonEmoticon