PHP Criar tabela de seleção com foco

5 de outubro de 2018

Boa galera

Ai estou desenvolvendo um sistema em php para controle de obras.

Ele é bem simples tem um menu do lado esquerdo e o conteúdo do lado direto.

A parte da lista aparece quando clico no cadastro, a ideia é que tenha os campos para cadastro de um novo funcionário acima e abaixo a lista retornada da consulta dos funcionários cadastrados. Está cheio de detalhes para mudar a cor de fundo da tabela quando passado o mouse e quando selecionado o item da tabela.

Enfim consegui fazer tudo isso em javascript e css, porém o que gostaria de fazer para completar essa ideia é que ao clicar no item da tabela ele me de um foco na div ou link selecionado para que ao mexer com as setas acima e abaixo ele mude o item da tabela. Não sei se tem como fazer isso mais é mais o menos uma lista igual do delph.

Se alguém puder me ajudar com alguma solução mais simples ou quiser se aventurar comigo nesse desenvolvimento manda o recado aqui!

Obs.: Onde está em azul na tabela é o item selecionado que já passa os valores no form acima a ideia é o foco nele e ao apertar acima ou abaixo a tabela mude o foco.

Vou deixar mais detalhes com os print e o código da pagina.

<?php 
	include('conn.php');
	
	if (empty($_SERVER['QUERY_STRING'])) {
		}else {
			$id = $_GET['id'];
			$sql2 = 'SELECT * FROM funcionarios WHERE id = ' .$id;
			foreach ($conn->query($sql2) as $rs) {
				$nome = utf8_encode($rs['nome']);
				$cod = ($rs['id'] + 11520);
				$rg = $rs['rg'];
				$cpf = $rs['cpf'];
				$funcao = $rs['funcao'];
				$diaria = $rs['diaria'];
			}
			echo "<script>document.querySelector('div').focus();</script>";
		}
?>
<html>
<head>
<meta charset="utf-8">
<link href="titulo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//Função Iframe 100%
window.onload = function(){
parent.document.getElementById("iframeconteudo").height = document.getElementById("minhaframe").scrollHeight + 35;
}
</script>
</head>
<body>
<div id="minhaframe">
	<div class="titulo">
		<h2>Cadastro de Funcionários:</h2>
	</div>
	<!--FOMULARIO LISTA--> 
	<form action="cadastrar.php" method="post">
		<div id="formulario">
			<table border="0" cellpadding="3" >
			<tr><td>Código</td><td><?php if (empty($_SERVER['QUERY_STRING'])) {}else {echo $cod; }?></td></tr>
			<tr><td>Nome</td><td><input type="text" value="<?php if (empty($_SERVER['QUERY_STRING'])) {}else {echo $nome; }?>"/></td></tr>
			<tr><td>R.G</td><td><input type="text" value="<?php if (empty($_SERVER['QUERY_STRING'])) {}else {echo $rg; }?>"/></td></tr>
			<tr><td>CPF</td><td><input type="text" value="<?php if (empty($_SERVER['QUERY_STRING'])) {}else {echo $cpf; }?>" /></td></tr>
			<tr><td>Função</td><td><input type="text" value="<?php if (empty($_SERVER['QUERY_STRING'])) {}else {echo $funcao; }?>" /></td></tr>
			<tr><td>Diária</td><td><input type="text" value="<?php if (empty($_SERVER['QUERY_STRING'])) {}else {echo $diaria; }?>" /></td></tr>
			<tr><td>Foto</td><td><input type="file" accept="jpg" /></td></tr>
			</table>
		</div>
	</form>
		</br></br>
	<?php
		$class = "divlista";
		foreach ($conn->query($sql) as $row) {
				if (empty($_SERVER['QUERY_STRING'])){
				}else{
					if(($row['id'] + 11520)== $cod){ 
						$class = "divlista2";
					}}
				echo "<a href='?id=".$row['id']."' target='_self'>
						<div class='".$class."' id='divselecao".$row['id']."'>Cód."
				. ($row['id'] + 11520) . "&nbsp;-&nbsp;" . utf8_encode($row['nome']) . "</div></a>";
				$class = "divlista";
		}
	?>
</div>
</body>
</html>

DiF · 5 de outubro de 2018

@Rick Cubas

Você postou imagens e um código... mas ainda não consegui entender o que exatamente você quer fazer.

Pelo que entendi, queres clicar onde diz: Cod: 11521 - Cristiano Alves da Silva e aí dar foco no campo input referente ao nome?

6 de outubro de 2018

Não é isso.

Vou tentar explicar melhor.

Quero fazer uma tabela que me da a lista do que já tenho cadastrado no meu banco de dados.

Essa lista quero que ao passar o mouse acima ela fica cinza, ao clicar ela foca o campo mudando de cor a linha da tabela selecionada. Automaticamente por meio de GET ao clicar na tabela cada linha tem seu código em um link que repassa as informações para os botões input com intuito de editar ou excluir.

Enfim fiz tudo isso porém queria que a linha da div (tabela) ficasse com foco e ao clicar seta para cima ou seta para baixo ele movesse o foco como se estivesse mudando de linha.

Obs: No código cada linha está com um link a href com o código do id de cada funcionário e a tabela está em div, cada linha tem seu link e sua div separados.

adicionado 23 minutos depois

Encontrei esse código de javascript, acho que vai dar certo que é essa ideia mesmo que estava.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
    .container {
		
        display: block;
        grid-template-columns: auto auto auto auto auto auto auto;
        height: 500px;
        width: 80%;
        margin: 100px auto 0;
        /*background: #e3e3e3;*/
        grid-auto-rows: auto auto auto;
        grid-gap: 2em;
    }

    .item {
        border: 2px solid black;
    }

    
    .selected {
        background: grey;
    }

</style>

<div class="container">
    <div class="item selected">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item" data-dia="1">8</div>
    <div class="item" data-dia="2">9</div>
    <div class="item" data-dia="3">10</div>
    <div class="item" data-dia="4">11</div>
    <div class="item" data-dia="5">12</div>
    <div class="item" data-dia="6">13</div>
    <div class="item" data-dia="7">14</div>
    <div class="item" data-dia="1">15</div>
    <div class="item" data-dia="2">16</div>
    <div class="item" data-dia="3">17</div>
    <div class="item" data-dia="4">18</div>
    <div class="item" data-dia="5">19</div>
    <div class="item" data-dia="6">20</div>
    <div class="item" data-dia="7">21</div>
</div>


  

  <script>
    $(document).on('keyup', function (e) {

        // ATRIBUINDO O KEY CODE PARA AS VARIAVEIS PARA MELHOR LEGIBILIDADE
        let right = 39;
        let left = 37;
        let up = 38;
        let down = 40;

        // VARIAVEIS AUXILIARES PARA NAVEGACAO
        let index = 1;
        let totalColunas = 1;
        let proximo = 1;

        // VERIFICA SE A TECLA QUE ESTÁ SENDO DISPARADA É ALGUMA TECLA QUE QUEREMOS TRABALHAR EM CIMA
        if (e.keyCode === right || e.keyCode === left || e.keyCode === up || e.keyCode === down) {

            // PERCORE TODAS AS DIVS DA CLASSE ITEM PARA SETAR O INDICE DA PROXIMA
            $.each($('.item'), function () {
                if ($(this).hasClass('selected')) {
                    switch (e.keyCode) {
                        case right:
                            proximo += index;
                            break;
                        case left:
                            proximo = index - 1;
                            break;
                        case up:
                            proximo = index - totalColunas;
                            break;
                        case down:
                            proximo += index + (totalColunas -1);
                            break;
                    }
                }
                index++;
            });

            index = 1;
            // VERIFICA SE O RETORNO É MAIOR QUE O NUMERO TOTAL DE DIVS E RETORNA FALSO PARA A NAVEGACAO NÃO SAIR DE DAS DIVS
            if(proximo > $('.item').length) {
                return false;
            // VERIFICA SE O RETORNO É MENOR QUE 1 E RETORNA FALSO PARA A NAVEGAÇÃO NÃO SAIR DAS DIVS
            }else if(proximo < 1 ) {
                return false;
            }
            // PERCORRE TODAS AS DIVS ITEMS PARA ATRIBUIR A CLASSE SELECTED NA DIV QUE O CURSOR DEVE IR SETADO NA VARIAVEL PROXIMO
            $.each($('.item'), function () {
                $(this).removeClass('selected');
                if (index === proximo) {
                    $(this).addClass('selected');
                }
                index++;
            })
        }

    });
</script>

FabianoS · 6 de outubro de 2018

@Rick Cubas Bom não sei se tu resolveu seu problema com esse código, mas pelo o que eu vi, se você tiver mais de 21 itens na tabela a seleção some depois de certo tamanho, eu fiz um em jquery(eu acho mais fácil).

https://jsfiddle.net/3buq4ftk/1/