Tentei criar uma tabela vazia para que quando o usuário clica-se no meio do campo <td>
aparece um <input type="text" />
para digitar.
Segue o código:
$(function () {
$("td").click(function () {
var conteudoOriginal = $(this).text();
$(this).addClass("celulaEmEdicao");
$(this).html("<input type='text' value='" + conteudoOriginal + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var novoConteudo = $(this).val();
$(this).parent().text(novoConteudo);
$(this).parent().removeClass("celulaEmEdicao");
$(this).parent().next();
};
});
$(this).children().first().blur(function(){
var novoConteudo = $(this).val();
$(this).parent().text(novoConteudo);
$(this).parent().removeClass("celulaEmEdicao");
$(this).parent().next();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="0" cellspacing="0" width="968" style="border-collapse:collapse;table-layout:fixed;width:734pt">
<tbody>
<tr class="item" style="text-align: center;">
<td class="cidade"></td>
<th style="text-align: center;">JAN</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Gostaria que ao termino da digitação o usuário tive-se a possibilidade de mover o cursor para o próximo <input type="text" />
da <td>
seguinte através de um enter
ou tab
, porém não consegui disponibilizar esssa funcionalidade para o usuário.