Supprimer une ligne dans une table avec jQuery et PHP

liloune89
Javascript

Bonjour,

voilà je suis à la recherche de la meilleure méthode pour supprimer une ligne entière dans une table avec du jQuery.
J'ai trouvé différent tutos mais je ne suis pas très alaise avec les scripts.

Je vous mets le code que j'utilise mais qui est efficace que pour une suppression à l'écran mais pas dans la base. Dès qu'on réactualise la page, la ligne est toujours là.

Dans le header

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('table#delTable td a.delete').click(function()
        {
            if (confirm("Etes-vous sûr de vouloir supprimer cet élément ?"))
            {
                var id = $(this).parent().parent().attr('id');
                var data = 'id=' + id ;
                var parent = $(this).parent().parent();
                $.ajax(
                {
                       type: "post",
                       url: "delete_row.php",
                       data: data,
                       cache: false,

                       success: function()
                       {
                        parent.fadeOut('slow', function() {$(this).remove();});
                       }
                 });                
            }
        });

        // style the table with alternate colors
        // sets specified color for every odd row
        $('table#delTable tr:odd').css('background',' #f5f5f5');
    });

</script>

dans body j'ai créé un tableau 

$query="SELECT * FROM $table_users, $table_porfolio, $table_porfolio_user WHERE id='$the_id' && $table_porfolio.id_user='$the_id' && $table_porfolio_user.id_porfolio=$table_porfolio.id_porfolio"; 
    // affiche les infos des tables (users, porfolio et porfolio_user)
    $result=mysql_query($query) or die('Erreur SQL !<br>'.$query.'<br>'.mysql_error());
if ($result)
{
// affichage du tableau de ce qui existe
echo "<table id=delTable width=96% cellpadding=3 cellspacing=0 align=center>";
echo "<tr><td><h6>ID</h6></td>";
echo "<td><h6>Description</h6></td>";
echo "<td><h6>Action</h6></td></tr>";
while($ligne=mysql_fetch_array($result))
{
/////// $table_porfolio
$id_porfolio=$ligne"id_porfolio"];
/////// $table_porfolio_user
$id_poruser=$ligne"id_poruser"];
$url=$ligne"url"];
$dossier=$ligne"dossier"];
$image=$ligne"image"];
$type=$ligne"type"];
$description=$ligne"description"];
$confidentiel=$ligne"confidentiel"];
echo "<tr id='$id_poruser'><td valign=top style=text-align:center>$id_poruser</td>";
echo "<td>";
if (!empty($url)) { echo "<img src=http://www.easy-thumb.net/min.html?url=$url&size=160x120>";}
if (!empty($image)) { echo "";} 
echo "</td>";
echo "<td valign=top><h6>$type</h6>$description</td>";
echo "<td valign=top style=text-align:center>";
if ($confidentiel==1) { echo "Oui";}
if ($confidentiel==0) { echo "Non";} 
echo "</td>";
echo "<td valign=top style=text-align:center><a href=\"#\" class=\"delete\"><img border=\"0\" src=\"img/delete.png\" /></a></td></tr>";
}
echo "</table>";
}

et la page "delete_row.php" 

if(isset($_POST'delete'])) { // Si supprimer
  $result = mysql_query("DELETE FROM $table_porfolio_user WHERE id_poruser = ".(int)$_POST'delete']);
$query1="OPTIMIZE TABLE $table_porfolio_user";
$result1=mysql_query($query1) or die('Erreur SQL !<br>'.$query1.'<br>'.mysql_error());
}

Est-ce que quelqu'un peut m'apporter des lumières car je ne suis pas douée avec jQuery mais j'aimerais bien comprendre mon erreur.
Chose que je ne souhaite pas c'est envoyer l'info en $_GET dans l'url de la page.
Merci par avance de votre aide.

4 réponses

liloune89
Auteur
Réponse acceptée

Mon fichier .js est dans un dossier js mais pas avec delete_row.php
En fait c'est construit comme ceci :
www/page.php
www/delete_row.php
www/js/jquery-1.3.2.min.js

Je range tous mes fichiers .js ensemble.

J'ai fini par y arriver en adaptant ce tuto
http://www.snoupix.com/initiation-a-ajax-avec-jquery-partie-1_tutorial_20.html

Et finalement ça fonctionne.
C'était pas celui sur lequel j'étais parti mais, sans doute que certaines infos manquait pour être efficace, je ne sais pas.

Merci beaucoup d'avoir prit le temps de me répondre.
Je vais me réinstaller firebug, l'idée est très bonne, merci.

mespeche

Ton fichier delete_row.php est bien au même endroit que ton fichier .js ? Utilise la console du type firebug ça t'aidera à voir l'erreur ;)

priximmo

Bonjour,

le temps a passé mais je rencontre le même problème que toi. J'ai un tableau avec un bouton en bout de ligne et je souhaite que sur un clic je supprime une ligne. Tout cela de manière dynamique avec un rafraichissement automatique du tableau.

Pourrais tu me guider car en lisant ton code ci-dessus je pensais avoir touvé la solution ?

++

Xavier

liloune89
Auteur

Bsr Xavier,

alors depuis que j'ai mit en place ce système j'ai amélioré et l'utilise souvent. Donc il n'est plus tout à fait identique.
Il faut 4 éléments :

Une fois que tu as tout ceci, passons aux choses sérieuses, mise en place du code.

// Dans page.php 

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<!-- Script SUPPRIMER -->
<script type="text/javascript"> 
    function supprimer(id){
        if (id > 0) {
            //Exécution du script PHP avec Ajax
            $('#mytable tr[id="row_' + id + '"] td').css({
                        'backgroundImage': 'none',
                        'backgroundColor': 'white',
                    });
                    $('#mytable tr[id="row_' + id + '"] td').animate({
                        'backgroundColor': '#ff8888',
                        'color': '#941010'
                    }, 1000);
            $.get('del.php', { // lien de la page qui permet la suppression
                idsup:id //variable de type GET (on récupèrera la variable avec $_GET'idsup'])
            }, function(data){
                //si la requête s'est bien déroulée
                if (data == '1') {
                    $('#mytable tr[id="row_' + id + '"] td').fadeTo("slow", 0, function(){
                        $(this).hide();
                    }); 
                } else{
                    alert('Problème de connexion à la base de donnée');
                }
            });

        }
    }
</script>
</head>
<body>
<?php
/* Récupération des données via bdd */
                $query3="SELECT * FROM $table_articles";
        $result3=mysql_query($query3) or die('Erreur SQL !<br>'.$query3.'<br>'.mysql_error());
        if ($result3)
        {
        echo "<table id=\"mytable\" align=\"center\" cellpadding=\"3\" cellspacing=\"0\" style=\"marin: 0 auto;\"> 
            <tr style=\"background-color:#333;color:white;\">
                <td width=\"5%\" style=\"text-align:center\">ID</td>
                <td width=\"60%\">Titre des articles</td>
                <td colspan=\"2\" style=\"text-align:center\">Action</td>
            </tr>";
        while($ligne=mysql_fetch_array($result3))
        {
        $the_id_art=$ligne"id_art"];        
        $nom_article=$ligne"nom_article"];

        echo "<tr id=\"row_".$the_id_art."\">"; // début de ligne
        echo "<td style=\"text-align:center\">$the_id_art</td>"; // ID du menu
        echo "<td>$nom_article</td>"; // nom article
        echo "<td width=\"7%\" style=\"text-align:center\"><a class=\"supprimer\" href=\"javascript:supprimer(".$the_id_art.")\" alt=\"Supprimer\" title=\"Supprimer\"><span>Supprimer</span></td>"; // supprimer ligne jQuery
        echo "</tr>"; // fin de la ligne
        }
        echo "</table>";
        }
?>
</body>

// Dans del.php 

<?php
    $query = "DELETE FROM $table_articles WHERE id=".($_GET'idsup'])."";
    $result=mysql_query($query) or die('Erreur SQL !<br>'.$query.'<br>'.mysql_error());

        if ($result) {
        echo '1';
        }
        else
        {
        echo '0';
        }
$query2="OPTIMIZE TABLE $table_articles";
$result2=mysql_query($query2) or die('Erreur SQL !<br>'.$query2.'<br>'.mysql_error());
?>

// dans CSS 

.supprimer{display:block; width:16px; height:16px; margin:0; padding:0; background-image:url('../img/delete.png');}
.supprimer span{display:none;}
.categorie > tbody > tr {background: #E7E6E6;}
.categorie > tbody > tr:nth-child(odd) {background: #F1F0F1;}

Voilà en principe, tu devrais avoir tous les éléments.
Si un problème, n'hésites pas ;-)