How to read table data and erase this data

Asked

Viewed 89 times

0

Good morning, I’m developing a site in php/html and I’m having some difficulty in deleting a row from the table, I’m already able to select the line, just need to delete. Here I will leave the code of my table:

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*/?

>

And here I’ll leave the script I’m using to select a line:

<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>

This script also allows us that by clicking on the button it shows in a window the selected values. If anyone knows how to delete selected data please help me. Thank you

php javascript

  • this table works? the first row has 5 columns and then just adds 2, this should break the entire layout

  • I know, it’s a test table, the spaces then appear blank, because there’s no data entered

  • It depends on how you delete this data, but either way you will need to send via GET or POST the data that needs to be erased. You need to always have a line selected to store the ID in an array, then convert it to string or serialize and send it via GET or POST to the page that will delete the data, then you need to convert this data to array and so traverse-There and go erasing the ID’s you sent.

  • @Franckcosta the problem is to do this, I’m a beginner in javascript and still know how to do a lot of things

1 answer

0

Hello, you want to delete only from table html or of mysql also? To delete only this table html you can use the method remove() of javascript. I changed the function of your button Eliminate user adding the line document.querySelector('.selecionado').remove(); and now it deletes the selected row from the table when you click the button

    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();
    });

  • Hello, I would also like to delete in mysql

  • @Joãocosta you will need to make a call ajax shortly after document.querySelector('.selecionado').remove(); passing the id of the line

  • obg, have some example so you can observe and learn ajax?

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.