Чет типа такого:
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
table, td{
border: 1px solid #ccc;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
}
td{
padding: 4px;
}
td input{
width: 100%;
padding: 4px;
margin: 0;
border: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: inherit;
height: 28px;
}
td input:focus{
outline: 1px solid blue;
}
.editable td{
padding: 0;
}
#edit{
width: 400px;
}
</style>
<table id="edit">
<tbody>
<tr id="0">
<td data-type="text">Бетмен</td>
<td data-type="number">24</td>
<td data-type="date">1989-04-28</td>
</tr>
</tbody>
</table>
<script>
(function(){
var table = document.getElementById('edit');
for (var i = 0; i < table.tBodies[0].rows.length; i++) {
var row = table.tBodies[0].rows[i];
row.onclick = onRowClick;
}
function onRowClick(event) {
var target = event ? event.target : window.event.srcElement;
this.onclick = null;
this.className = 'editable';
for (var i = 0; i < this.cells.length; i++) {
var cell = this.cells[i];
var input = document.createElement('input');
// IE fails to change "type" property to unsupported value
input.setAttribute('type', cell.getAttribute('data-type') || 'text');
input.value = cell.firstChild.data;
cell.replaceChild(input, cell.firstChild);
if (cell == target)
input.focus();
}
}
})();
</script>
Поля ввода даты и числа поддерживаются только в новых браузерах. Также не уверен по формату даты. Ловишь событие blur инпута - это значит он потерял фокус, то есть редактирование закончилось и можно отсылать данные.