Página Editável
Olá Senhores(as)!
Bom, eu fiz duas página de teste em HTML no meu LocalHost. Eu quero fazer tipo uma planilha ou algo semelhante, porem estou tendo dificuldades, e queria a sua ajuda para resolver.
Tenho duas páginas como dito em HTML. test1 e test2 a página de test1 terá tipo uma pop-up onde quem tiver acesso a ela poderá modificar o conteúdo do test2 sem abrir ela, algo instantâneo.
Tenho um formulário que quando preenche sai em tabelas com 7 td, quero capturar a tabela a partir do tr e jogar para o test2 e poder editar lá, se é que me entende, porem não está funcionando desse jeito. E eu não quero usar PHP pois onde irei colocar esses arquivos não tenho suporte a PHP, há como fazer com HTML?
Irei deixar o código, para vocês visualizar e poder entender melhor e ver até onde eu conseguir chegar.
<html>
<head>
<title>Lista de Acessos</title>
<meta charset="utf-8"/>
<style type="text/css">font-family:Consolas;
}
.tabelaEditavel {
border:solid 1px;
width:100%;
}border:solid 1px;
}padding: 0;
}width:100%;
border:0;
background-color:rgb(255,253,210);
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery.get('http://localhost/site/module/administration-list', function(data){
eventslist = jQuery('.catchevents tr', data).clone();
jQuery('.recentevents').prepend(eventslist);
});
});jQuery(document).ready(function(){
jQuery("td").click(function(){
var conteudoOriginal = jQuery(this).text();
jQuery(this).addClass("celulaEmEdicao");
jQuery(this).html("<input type='text' value='" + conteudoOriginal + "' />");
jQuery(this).children().first().focus();
jQuery(this).children().first().keypress(function(e){
if(e.which == 13){
var novoConteudo = jQuery(this).val();
jQuery(this).parent().text(novoConteudo);
jQuery(this).parent().removeClass("celulaEmEdicao");
};
});
jQuery(this).children().first().blur(function(){
jQuery(this).parent().text(conteudoOriginal);
jQuery(this).parent().removeClass("celulaEmEdicao");
});
});
});
</script>
</head>
<body>
<table class="tabelaEditavel">
<thead>
<tr>
<th>Apelido:</th>
<th>E-mail:</th>
<th>Entrada:</th>
<th>Saída:</th>
<th>Nível:</th>
<th>Recomendado:</th>
<th>Anotações:</th>
</tr>
</thead>
<tbody class="recentevents">
<tr>
<td>Teste</td>
<td>teste@teste.com</td>
<td>20/05/2015</td>
<td>20/05/2016</td>
<td>2</td>
<td>Admin</td>
<td>Ele é bom</td>
</tr>
</tbody>
</table>
</body>
</html>Desde já agradeço a sua ajuda. ;)
Discussão (0)
Carregando comentários...