Bom dia PessoALL Gostaria de saber se alguém já fez alguma tabela editável, ou se tem algum framework que me possibilite a fazer isso. tenho a tabela pronta, gostaria de poder andar de celula a celula (igual no excel…

Navegando e editando em 1 tabela

Olá Christian

Você pode fazer essa planilha usando css que irá definir a aparência da celula em edição ou não e javascript para controla essa mudança de aparência (estado).
Segue um exemplo de como ficaria essa “planilha”, aconselho a utilizar uma api javascript como a que estou usando no exemplo, para facilitar o trabalho.
mais info sobre a api JQuery :

http://www.jquery.com/
http://docs.jquery.com/Tutorials

quanto ao evento do teclar enter e mudar de celula já esta um pouco fora da minha alçada ,continue pesquisando que tem como fazer, blz

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Starting page</title>
<script src="js/jquery.js">
	
</script>

<script type="text/javascript">
	$( function() {
		$("input").addClass("celulaNaoEditavel");
		
		$("input").focus(function() {
			$(this).removeClass("celulaNaoEditavel");
			$(this).addClass("celulaEditavel");
		});
		
		$("input").blur(function() {
			$(this).removeClass("celulaEditavel");
			$(this).addClass("celulaNaoEditavel");
		});	
	});
</script>
<style type="text/css">
.celulaNaoEditavel {
	border: none;
	cursor: pointer;
	outline-style: none;
}

.celulaEditavel {
	border: solid 2px gray;
	cursor: text;
}

td {
	border-right: solid black 1px;
	border-bottom:  solid black 1px;
	padding: 0px;
}

table{
	border-top: solid black 1px;
    border-left: solid black 1px;
    border-spacing: 0px;
}

</style>
</head>

<body>
<!-- c:redirect context="${pageContext.request.contextPath}" url="/facelets/pessoaMain.jsf"/-->
<form action="">
<table border="0">
<tbody>


	<tr>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
	
	</tr>
	<tr>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		
	</tr>
	<tr>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		
	</tr>
	<tr>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		
	</tr>
	<tr>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		<td><input  type='text' /></td>
		
	</tr>
</tbody>
</table>
</form>
</body>
</html>

espero ter ajudado vc.

O Google Docs que se cuide… :lol:

3 Respostas

Topicos relacionados