+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][jQuery] Manipulation de tableaux (/showthread.php?tid=2200)
Pages :
1
2
[Résolu][jQuery] Manipulation de tableaux - daroth - 16-04-2008
Salut à tous,
afin de rendre mes sites plus agréables à l'utilisation, je souhaite me mettre au javascipt avec le bibliothèque JQuery
J'ai donc farfouillé un peu partout dans la doc, mais je bloque sur un point.
Je souhaite faire disparaître une ligne d'un tableau quand on clique sur le lien "valider" contenu dans la ligne, mais pour l'instant je n'ai réussis qu'à faire disparaître tout le tableau quand je clique sur un lien, d'où le problème...
Voilà donc mon code source :
Code PHP :
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="./css/design.css" />
<!-- Définition des codes javascript : -->
<script src="./js/jquery.js"></script>
<script>
$(document).ready(function() {
//$("tr").hide();
$("a").click(function () {
$("tr").hide();
return false;
});
});
</script>
</head>
<body>
<div id='content'>
<table>
<tr>
<td>0</td>
<td>12 octobre 2009</td>
<td>Jimi Hendrix</td>
<td><a href=''>Consulter</a></td>
<td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>
</tr>
<tr>
<td>1</td>
<td>15 juin 2008</td>
<td>Jimi Page</td>
<td><a href=''>Consulter</a></td>
<td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>
</tr>
</table>
</div>
</body>
</html>
Je suis donc bloqué là.
Si une âme charitable peut m'apporter sa lumière pour me débloqué je le remercie d'avance :respect:
++
RE: Manipulation de tableau avec jquery. - NicoMSEvent - 16-04-2008
a mon avis (je dis a mon avis pcq je ne connais pas plus que ça jQuery)
$("a") signifie n'importe quel lien. Donc, $("tr") va agir sur tous les <tr>.
La solution, numérote tes lignes (genre <tr id="tr01"> ), et les liens ( avec id="a01" ). Il ne te restera plus qu'une petite manipulation de chaine pour que ton fonction fasse disparaitre la bonne ligne.
Sephi, tois qui est expert en jQuery, tu pourrais donner tes lumières
RE: Manipulation de tableau avec jquery. - Lanwin - 16-04-2008
Effectivement Nico a raison
il faut que tu choisisses le lien qui va faire disparaitre le tr en lui affectant un id ou une class.
Idem pour la ligne que tu veux faire disparaitre.
Voilà un exemple tiré de ton code. Le lien "Consulter" de ta première ligne fera disparaitre cette ligne en question
Code :
<script>
$(document).ready(function() {
//$("tr").hide();
$("a.disparaitre").click(function () {
$("tr.disparaitre").hide();
return false;
});
});
</script>
</head>
<body>
<div id='content'>
<table>
<tr class="disparaitre">
<td>0</td>
<td>12 octobre 2009</td>
<td>Jimi Hendrix</td>
<td><a href='' class="disparaitre">Consulter</a></td>
<td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>
</tr>
<tr>
<td>1</td>
<td>15 juin 2008</td>
<td>Jimi Page</td>
<td><a href=''>Consulter</a></td>
<td><a href=''><img src='./img/accept.png' alt='valider'/></a></td>
</tr>
</table>
</div>
</body>Il existe un autre méthode qui est de demander à chaque lien de faire disparaitre la ligne dont elle est l'enfant (cad dont où elle est imbriquée). Je n'ai pas par contre plus le souvenir du code, mais avec la doc il te sera facile de construire cette fonction (si toute fois c'est ce que tu veux
)Amicalement,
RE: Manipulation de tableau avec jquery. - daroth - 16-04-2008
Je pense que la deuxième solution (avec le système mère/fils) est le bon, car dans la première solution j'ai l'impression qu'il faut autant de méthodes javascript que de lignes dans le tableau (or le tableau sera généré en php dans la version final).
Je vais donc creuser la deuxième solution de Lanwin.
Je vous fait part de mes découvertes dès que possible, en attendant n'hésitez pas à me proposer d'autres solutions
++
RE: Manipulation de tableau avec jquery. - Sephi-Chan - 16-04-2008
NicoMSEvent a écrit :Sephi, tois qui est expert en jQuery, tu pourrais donner tes lumièresC'est très flatteur. :p Cela dit, je suis malheureusement très loin d'être un gourou en jQuery, des gens comme Anthor sont largement meilleurs que moi en la matière !
Mais j'ai quand même une solution à proposer pour ce problème, et qui ne requiert pas de modification dans ton code XHTML.
Code PHP :
<?php
$(document).ready(function(){
$('td a').click(function(){
$(this).parent('td').parent('tr').hide();
return false;
});
});
Ainsi, quand on clique sur un lien contenu dans une cellule de tableau, le script recherche le parent de l'élément cliqué (donc la cellule de tableau), puis va chercher le parent de ce parent, donc la ligne du tableau, puis la masque.
Note que dans ce cas, tu peux omettre de spécifier le type (tr et td) des parents, mais ça facilite la lecture et la compréhension.
- [Documentation jQuery] La fonction parent() ;
- [Documentation jQuery] Les fonctions de déplacement dans l'arbre DOM ;
Sephi-Chan
RE: Manipulation de tableau avec jquery. - daroth - 16-04-2008
Merci beaucoup pour cette réponse rapide et prévise.
Une autre question se pose maintenant :
Imaginons que chaque ligne du tableau soit un tuble dans une base de données.
Comment faire pour que que je clique sur le lien, la ligne disparaisse à la fois dans la page html et dans la base de données?
RE: Manipulation de tableau avec jquery. - NicoMSEvent - 16-04-2008
fais un appel Ajax qui lancera sur le serveur une requete qui fait ça ^^
RE: Manipulation de tableau avec jquery. - Sephi-Chan - 16-04-2008
Voici une piste qui pourra sans doute t'aider. Je pense que les commentaires suffiront mais si ce n'est pas le cas, n'hésite pas à poser des questions.
Code PHP :
<?php
$(document).ready(function(){
$('td a').click(function(){
/*
* On conserve l'objet représentant la ligne du
* tableau à laquelle appartient le lien cliqué.
*/
var rowToDelete = $(this).parents('tr');
/*
* On conserve le contenu de la première colonne
* en supposant qu'il s'agisse de l'identifiant
* unique de l'entrée en base de données. Si ce
* n'est pas le cas, on changera de technique.
*/
idToDelete = rowToDelete.children('td:first').text();
$.ajax({
url : 'deleteRow.php',
type : 'POST',
dataType : 'text',
data : {'idToDelete' : idToDelete},
success : function(response){
/* On procède au masquage. */
rowToDelete.hide();
alert("La mise à jour s'est effectuée correctement.\n" + response);
},
error : function(){
alert("Une erreur est survenue.");
}
});
return false;
});
});
Page deleteRow.php :
Code PHP :
<?php
if(isset($_POST['idToDelete'])){
/*
* Ici s'effectue le traitement de la base de données en
* vérifiant naturellement bien la ou les données transmises.
*
* Les sorties textuelles de ce fichier seront contenues
* dans la variable récupérable par l'événement "success".
*/
echo "Ligne supprimée : ".$_POST['idToDelete'].".";
}
?>Sephi-Chan
RE: Manipulation de tableau avec jquery. - daroth - 16-04-2008
Et de deux bonnes réponses pour Mr Sephi-Chan!! :respect:
Voilà donc mon code php de suppression du tupple :
Code PHP :
<?php
if(!empty($_POST['idToDelete']) && is_numeric($_POST['idToDelete'])) {
mysql_connect('localhost', 'root', '');
mysql_select_db('cdb');
mysql_query('DELETE FROM test WHERE id="'.$_POST['idToDelete'].'"');
}
?>Deux questions se posent donc maintenant :
- Est-ce que toutes les vérifications ont bien étées faites sur la variable POST ?
- Comment faire pour faire remonter un erreur vers le script appelant (problème de connexion à la base de données, numéro de champ incorrecte, trop de connexion à MySQL...) ????
Ça en fait des questions, mais je veut TOUT savoir! :good:
RE: Manipulation de tableau avec jquery. - Sephi-Chan - 16-04-2008
Je te déconseille d'utiliser empty() puisque dans le cas où ton idenfiant est 0, tu ne passes pas le test. Mais je doute que ce cas puisse arriver en pratique puisque les identifiants en base de données commencent généralement à 1. Le problème peut survenir par contre si tu changes de support de données tels que XML, JSON, etc. Tu peux par contre utiliser isset(), qui conviendra très bien.
Le reste semble bon, mais fais par contre attention à la fiabilité des données. Ajax te transmet la données, mais rien ne te dit qu'elle n'a pas été altérée entre le navigateur et le serveur, pense donc à vérifier si la personne qui appelle cette requête est autorisée à le faire pour la ressource envoyée au script.
Pour faire remonter les erreurs, tu peux utiliser le fait que toute sortie textuelle sera contenu dans la variable de réponse (captée par l'événement success, ici je l'ai nommée response). Tu peux donc si tu le souhaites renvoyer ton message d'erreur comme ça. Tu écris (avec echo) l'erreur (par exemple
Code PHP :
<?php
if(isset($_POST['idToDelete']) && is_numeric($_POST['idToDelete'])){
mysql_connect('localhost', 'root', '');
mysql_select_db('cdb');
$query = sprintf(
"DELETE
FROM test
WHERE id = %d;",
(int) $_POST['idToDelete']
);
$sql = mysql_query($query);
if(mysql_affected_rows() == 1){
echo "Ligne supprimée : ".$_POST['idToDelete'].".";
}
else {
echo "Aucune lignée n'a été supprimée.";
}
}
?>Si tu préfères la jouer gourou et te servir des codes HTTP (200, 301, 302, 404, 500, etc.), tu peux les consulter sur [Wikipédia] Liste des codes HTTP.
Ton objet peut alors avoir ce genre de tronche :
Code PHP :
<?php
$.ajax({
url : 'deleteRow.php',
type : 'POST',
dataType : 'text',
data : {'idToDelete' : idToDelete},
success : function(response){
},
complete : function(ajaxObject){
var status = ajaxObject.status;
if(status == 200){
alert("La mise à jour s'est effectuée correctement.\n" + ajaxObject.responseText);
}
if(status == 404){
alert("La page distante n'a pas été trouvée.");
}
}
});
C'est bien de savoir le faire, mais je pense sincèrement que combiner les événements error et success suffit largement.
Sephi-Chan