0

Bom dia, eu estou desenvolvendo um site em php/html e estou tendo alguma dificuldade em apagar uma linha da tabela, eu já estou conseguindo selecionar a linha, só falta mesmo apagar. Aqui vou deixar o código da minha tabela:

DOCTYPE html>
<html>
<head>
  <title>The Watcher</title>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

  <div class="header">
    <img src="img/logo4.png" class="index_logo" alt="The watcher" >
    <h1 class="index_nome">The Watcher</h1>
  </div>
    <h1>Lista de Utilizadores</h1>
  <div class="vertical-menu">
    <a href="index.php">Caixa de entrada</a>
    <a href="historico.php">Histórico</a>
    <a href="users.php">Lista de utilizadores</a>
    <a href="index.php?logout=true">Terminar sessão</a>
  </div>
  <button id="visualizarDados" class="btn_delete">Eliminar utilizador</button>
  <?php

        include 'conn.php';

        if(isset($_SESSION['msg'])){
            echo $_SESSION['msg'];
            unset($_SESSION['msg']);
        }



        $pagina_atual = filter_input(INPUT_GET,'pagina', FILTER_SANITIZE_NUMBER_INT);       
        $pagina = (!empty($pagina_atual)) ? $pagina_atual : 1;


        $sql = "SELECT * FROM images ORDER BY id ASC";
        $resultado_usuarios = mysqli_query($conn, $sql);
        ?>

<table id="minhaTabela">
  <tr>
    <th>id</th>
    <th>Nome</th>
    <th>email</th>
    <th>Telemóvel</th>
    <th>Criado em</th>
  </tr>
<?php  

/*Enquanto houver dados na tabela para serem mostrados será executado tudo que esta dentro do while */
while($row_usuario = mysqli_fetch_assoc($resultado_usuarios)){


/*Escreve cada linha da tabela*/
echo '<tr><td>' . $row_usuario['id'] . 
'</td><td>' . $row_usuario['image'] .
'</td></tr>';

}/*Fim do while*/?

>

E aqui vou deixar o script que estou utilizando para selecionar uma linha:

<script type="text/javascript">

   var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
  var linha = linhas[i];
  linha.addEventListener("click", function(){
    //Adicionar ao atual
    selLinha(this, false); //Selecione apenas um
    //selLinha(this, true); //Selecione quantos quiser
  });
}

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function selLinha(linha, multiplos){
  if(!multiplos){
    var linhas = linha.parentElement.getElementsByTagName("td");
    for(var i = 0; i < linhas.length; i++){
      var linha_ = linhas[i];
      linha_.classList.remove("selecionado");    
    }
  }
  linha.classList.toggle("selecionado");
}

/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");

btnVisualizar.addEventListener("click", function(){
  var selecionados = tabela.getElementsByClassName("selecionado");
  //Verificar se eestá selecionado
  if(selecionados.length < 1){
    alert("Selecione pelo menos uma linha");
    return false;
  }

  var dados = "";

  for(var i = 0; i < selecionados.length; i++){
    var selecionado = selecionados[i];
    selecionado = selecionado.getElementsByTagName("td");
    dados += "ID: " + selecionado[0].innerHTML + 
    " - Diretório: " + selecionado[1].innerHTML + 
    "\n";
  }

  alert(dados);
});
</script>

Este script tabém nos permie que, ao clicar no botão ele mostre numa janela os valores selecionados. Se alguém souber como apagar os dados selecionados que me ajude por favor. Obrigado

4
  • essa tabela funciona? na primeira linha tem 5 colunas e depois só adiciona 2, isso deve quebrar todo o layout Commented 8/07/2019 às 14:03
  • Eu sei, é uma tabela de testes, os espaços depois aparecem em branco, pq nao tem dados inseridos Commented 8/07/2019 às 14:10
  • Depende de como você vai apagar esses dados, mas de qualquer forma vocÊ vai precisar mandar via GET ou POST os dados que precisa ser apagado. Você precisa sempre que uma linha for selecionada guardar o ID em uma array, depois você converta em string ou serialize e manda via GET ou POST para a página que irá excluir os dados, depois você precisa convertar esses dados para array e assim percorre-la e ir apagando os ID's que você enviou. Commented 8/07/2019 às 17:55
  • @FranckCosta o problema é fazer isso, eu sou iniciante em javascript e ainda sei fazer muita coisa Commented 9/07/2019 às 9:41

1 Resposta 1

0

Olá, você quer apagar apenas da tabela html ou do mysql também? Para apagar apenas ta tabela html você pode utilizar o método remove() do javascript. Alterei a função do seu botão Eliminar utilizador acrescentando a linha document.querySelector('.selecionado').remove(); e agora ele exclui a linha selecionada da tabela quando você clica no botão

    btnVisualizar.addEventListener("click", function(){
      var selecionados = tabela.getElementsByClassName("selecionado");
      //Verificar se eestá selecionado
      if(selecionados.length < 1){
        alert("Selecione pelo menos uma linha");
        return false;
      }

      var dados = "";

      for(var i = 0; i < selecionados.length; i++){
        var selecionado = selecionados[i];
        selecionado = selecionado.getElementsByTagName("td");
        dados += "ID: " + selecionado[0].innerHTML + 
        " - Diretório: " + selecionado[1].innerHTML + 
        "\n";
      }

      alert(dados);
      document.querySelector('.selecionado').remove();
    });
3
  • Olá, eu também gostaria de apagar no mysql Commented 12/07/2019 às 19:52
  • @JoãoCosta vocêvai precisar fazer uma chamada ajax logo após document.querySelector('.selecionado').remove(); passando o id da linha Commented 12/07/2019 às 22:39
  • obg, tem algum exemplo para que possa observar e aprender ajax? Commented 15/07/2019 às 18:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .