Delete Button and Edit Fields (PHP,SQL,HTML,CSS)

Asked

Viewed 322 times

1

I’m new here, student of Computer Science and Programming Internship...

I do not know much how the forum works, but I have a pertinent question that I have reviewed Google several times and still can not solve, even if it is a bit simple =(

I have a project to do and created a table in SQL and I am using PHP, the part of entries in these tables, listing it and some service call functions work... but I need to create a button in the listing that deletes a row from the table and make the listing field editable, but I can’t do it at all,someone would have some hint or guidance?

Thank you!! Follow the code of the listing/change/exclusion page:

<html>
<head>
<title> MENU DE AÇÔES</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="libs/jquery-3.2.1.min.js"> </script>

<style>
#t{
font-family: arial;
text-align:center;

}
#z{
font-size:105%;
font-weight:bold;
font-style: oblique;
position: relative;
text-align:center;
}

body, 
.menu,
.sub-menu {
margin: 0;
padding: 0;
}
.clearfix:after{
content: '';
display: block;
clear: both;
height: 20;
line-height: 0;
font-size: 30;
visibility: hidden;
overflow: hidden;
}
.menu,
.sub-menu {
   list-style: none;
background: #000;
}
.sub-menu {
background: #444;
}
.menu a {
text-decoration: none;
display: block;
padding: 20px;
color: #fff;
font-family: sans-serif;
font-size: 18px;
text-transform: uppercase;
font-weight: 700;
}
.menu li {
   position: relative;
}
.menu > li {
float: left;
}
   .menu > li:hover {
    background: #444;
}
.menu li:hover > .sub-menu {
  display: block;
}
div{
   font-family: arial;
  }
</style>

</head>
<body>
<?php include('header.php'); ?>
<form style= "right:2%;left:80%; top:2% ; position:absolute"        name="frmBusca" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>?a=buscar" >
<input type="text" name="palavra" />
<input type="submit" value="Buscar" />
</form>



<?php

/*
* EXCLUDE FROM WHERE 
* 
* UPDATE FROM WHERE 
* 
* 
* $_GET
* usar ID para selecionar o elemento 
*  
* 
*/

$acesso = mostra();
function mostra (){
$palavra = $_POST['palavra'];
$servidor = "localhost";
$usuario = "root";
$senha = "asdf000";
$banco = "automoveis";

$conexao = mysqli_connect($servidor,$usuario,$senha, $banco);
if($conexao){
    $db=mysqli_select_db($conexao, $banco);

} else {
    echo ("Erro ao conectar ao bando de dados");
    return false;
}
$String = "SELECT descricao,placa,codigoRenavam,anoModelo,anoFabricacao,cor,km,marca,preco,preco    Fipe FROM automovel ";
if($palavra != ''){
    $String .= "WHERE descricao LIKE '%".$palavra."%' OR placa LIKE     '%".$palavra."%' OR codigoRenavam LIKE '%".$palavra."%' OR anoModelo LIKE        '%".$palavra."%' OR anoFabricacao LIKE '%".$palavra."%' 
 OR cor LIKE '%".$palavra."%' OR km LIKE '%".$palavra."%' OR marca LIKE '                           %".$palavra."%' OR preco LIKE  '%".$palavra."%' OR precoFipe LIKE      '%".$palavra."%' ";
}
$String .= "ORDER BY descricao ";
$sql = mysqli_query($conexao, $String);

echo '<table border = 10 bordercolor = "#000" cellpadding="25" width="100%" table style="table-layout: fixed ;">';
echo '<tr id = "z"><td> Descrição </td><td> Placa </td><td>RENAVAM</td><td>Ano do Modelo</td><td> Ano de Fabricação</td><td> Cor</td>
        <td> Kilometragem </td> <td> Marca</td> <td> Preço </td> <td> Preço FIPE </td> <td> Exclui </td></tr>';

while( $exibe = mysqli_fetch_assoc($sql)){
    echo "<h3> <tr > <td>" .$exibe['descricao']. "</td> "; 
    echo " <td>" .$exibe['placa']. "</td> ";
    echo " <td>" .$exibe['codigoRenavam']. "</td> ";
    echo " <td>" .$exibe['anoModelo']. "</td> ";
    echo " <td>" .$exibe['anoFabricacao']. "</td> ";
    echo " <td>" .$exibe['cor']. "</td> ";
    echo " <td>" .$exibe['km']. "</td> ";
    echo " <td>" .$exibe['marca']. "</td> ";
    echo " <td>" .$exibe['preco']. "</td> ";
    echo " <td>" .$exibe['precoFipe']. "</td>";
    echo"<td> </td>";"</tr><h3>";
}

echo '</table>';    
}
?> 

</body>
</html>
  • You can do as follows, on the remove button you can put the registration ID as attribute of the button and on the "click" event you can call an Ajax by passing the registration ID you want to remove. The same goes for leaving the editable table, when the event happens to click on any item, you open an input text in the same place where it was clicked, and after the person clicks off you do another Update ajax.

  • You can use this example for the editable table. https://editor.datatables.net/examples/inline-editing/editIcon.html so you will only worry about Ajax.

1 answer

1

A sun, if I’ve figured out what you want, could be this one. I just put it in the mark. You will need to reference the JQUERY library.

The example in php (if so, will just replicate the input text for all <td>!

while( $exibe = mysqli_fetch_assoc($sql)){
    echo "<h3> <tr > <td>" .$exibe['descricao']. "</td> "; 
    echo " <td>" .$exibe['placa']. "</td> ";
    echo " <td>" .$exibe['codigoRenavam']. "</td> ";
    echo " <td>" .$exibe['anoModelo']. "</td> ";
    echo " <td>" .$exibe['anoFabricacao']. "</td> ";
    echo " <td>" .$exibe['cor']. "</td> ";
    echo " <td>" .$exibe['km']. "</td> ";
    echo "<td>  <input type='text' id='".$exibe['marca']."' name='marca' class='alterarMarca' disabled='true'></td>";
    echo " <td>" .$exibe['preco']. "</td> ";
    echo " <td>" .$exibe['precoFipe']. "</td>";
    echo "<td><a href='javascript:void(0);' class='updateTable'>Alterar</a></td>";
    echo"<td> </td>";"</tr><h3>";
}

JQUERY If you want to change this field then you need to add the following AJAX and update class

 <script>
     $(document).ready(function(){
        $(document).on('click', '.updateTable', function(){
        $('.alterarMarca').prop('disabled',true);
        var ID= $(this).parents('tr').find('.ID').val();
        var marca= $(this).parents('tr').find('.alteramarca').val();

            $.ajax({
                url: 'classupdate.php',
                type: "POST",
                cache:false,
                data:{ID:ID, marca:Marca},
                async: false,
                success:function(data){
                    alert(data);
                },
                error: function(jqXHR, textStatus, errorThrown){
                    alert(errorThrown);
                }
            });
      });
     });
    </script>

Any doubt do not hesitate to question.

Browser other questions tagged

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