Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

First

Página Editável

Por , em Javascript

Recommended Posts

First    1

First
Postado

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%;
}
.tabelaEditavel td {
border:solid 1px;
}
.tabelaEditavel .celulaEmEdicao {
padding: 0;
}
.tabelaEditavel .celulaEmEdicao input[type=text] {
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);
	});
});
//EDITAR
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. ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito