Discussion :

[Castiel777]

Bonjour,

j'ai 2 tableaux côte à côte, celui de gauche me permet de le fixer pour garder un visu dessus lors du scroll vers la droite du tableau de droite. Dans mon tableau de droite, j'ai un bouton suppr où j'ai besoin de récupérer l'information du tableau de gauche de cette même ligne. Comment puis-je procéder ? sachant que this fait référence à mon tableau de droite.
Un petit screen pour mieux comprendre:



Actuellement en retour j'ai ça, j'ai besoin de l'information encadrée en rouge:



Et voilà ma fonction pour le bouton:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
// DEBUT CLICK BOUTON SUPPRIMER
	$(document).on("click", "#BtnSuppr", function (e){
 
		var id = "<?php echo $id;?>";
		var NumInt = $("#tabGauche").closest("tr").find("td:eq(0)").text();
		var NomDoc = globNDoc;
		var Type = "";
 
		for($i=0;$i<5;$i++)
		{
			if($("#selectFax").val()==ValOption[$i])
			{
				var Option = ValOption[$i];
				TypeDoc = "fax";
			}
			if($("#selectMail").val()==ValOption[$i])
			{
				var Option = ValOption[$i];
				TypeDoc = "mail";
			}
		}
 
		if(TypeDoc == "mail"){
			var DateCreat = $(this).closest("tr").find("td:eq(7)").text();
			var Destinataire = $(this).closest("tr").find("td:eq(1)").text();
			var Expediteur = $(this).closest("tr").find("td:eq(0)").text();
			var HeureCreat = $(this).closest("tr").find("td:eq(8)").text();
			var TypeImp = $(this).closest("tr").find("td:eq(2)").text();
		}
		else{
			var DateCreat = $(this).closest("tr").find("td:eq(7)").text();
			var NumFax = $(this).closest("tr").find("td:eq(2)").text();
			var HeureCreat = $(this).closest("tr").find("td:eq(8)").text();
			var TypeImp = $(this).closest("tr").find("td:eq(3)").text();
		}
 
		$.ajax({
			"url":"SupprFax.php",
			"type":"POST",
			"data":{
				 "DateCreat": DateCreat, "Destinataire": Destinataire, "Expediteur": Expediteur, "NumFax": NumFax, "HeureCreat": HeureCreat, "id": id, "NomDoc": NomDoc, "NumInt": NumInt, "TypeDoc": TypeDoc, "TypeImp": TypeImp
			},
			"dataType":"json",
			"success":function(data){
 
			}
		});
 
		// $("#tabGauche").closest("tr").fadeOut("slow");
		$(this).closest("tr").fadeOut("slow");
		$("#NumInt").trigger("change");
	});
// FIN CLICK BOUTON SUPPRIMER

Merci d'avance, bonne journée !

[Doksuri]

pourquoi ne pas te simplifier la vie : dupliquer l'info du tableau de gauche dans la 1ere colonne du tableau de droite.
en CSS masquer cette 1ere colonne.
comme ca, en js t'as juste a "rester" dans ton <tr> pour retrouver ton info

[Castiel777]

Le problème est que même masqué, la page fait le traitement, si l'utilisateur souhaite afficher 10 000 lignes dans le tableau, ça va alourdir la page

merci pour ta suggestion

[NoSmoking]

Bonjour,
en récupérant l'indice de ta ligne <tr> de ton tableau de droite il te suffit d'aller lire le contenu de la <td> de la <tr> ayant le même indice dans ton tableau de gauche.

[Castiel777]

Bonjour NoSmoking,

effectivement c'est ce que je dois faire mais je suis face à un problème. Dans mon code, je ne gère pas dynamiquement mes tr, j'ai besoin de le faire pour que chaque lignes prennent +1 afin de les identifier. Je vous fais part du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
if(TypeRech == "Fax" || TypeRech == "Mails")
{
	// construit les lignes avec les données retour
	$.each(retourjson, function(titre, retour)
	{
		// toutes les colonnes que je ne souhaite pas afficher
		if(titre != "TypeInt" && titre != "Auth" && titre != "Envoi" && titre != "NDoc")
		{
			if(titre == "MtTotDoc")
			{
				retour = Arrondir(retour, 2);
				Total += +retour;
				retour += " €";
			}
			if(retour == "0 €") retour = "- €";
			if(retour == "00-00-0000" || retour == "00:00:00") retour = "";
 
			$cell=$("<td />").html(retour);
			$ligne.append($cell);
			if(titre == "NI") $cell.hide();
		}
	});
	$("#tabDroite").append($ligne);
}

Comment je peux modifier le code afin que chaque ligne à un tr id="numéro" ?

[SpaceFrog]

non tu peux simplement récupérer l'indice du tr dans la collection des tr avec .index() https://api.jquery.com/index/
Exemple de ciblage de la ligne de même rang dans un autre tableau
https://jsfiddle.net/6zgtcv34/11/

[Castiel777]

Merci bien pour vos réponses mais je ne parviens pas à faire ce que je souhaite. En fait quand je clic sur le bouton Suppr, je fais un fadeOut sur ma ligne this, donc ça fonctionne, mais la ligne correspond au Numéro d'intervention lui ne fadeOut pas, c'est normal, je ne fais rien dessus car je n'arrive pas à faire coincider les deux éléments

[NoSmoking]

J'ai du mal à voir ce que tu n'arrive pas à faire !!!
Par rexemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$('#table-de-droite tbody tr').on('click', function () {
  // récup. numéro de la ligne
  var num_ligne = $(this).index();
  // récup. ligne correspondante tableau de gauche
  var oElem = $('#table-de-gauche tbody tr').eq(num_ligne);
  // on fait ce que l'on veut avec l'élément
  oElem.fadeOut();
});

[Castiel777]

Bonjour,

merci pour ton intervention NoSmoking. La ligne qui récupère mon numéro de ligne est toujours égal à 1, je comprends pas pourquoi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var num_ligne = $(this).index();

[NoSmoking]

Peut être simplement parce que dans mon exemple l'écouteur est placé sur la <tr> et non sur un <button>, il te faut donc remonter à la <tr> parent du <button> avant de récupérer l'index().

Un indice : jQuery.closest().

[Castiel777]

Mais oui
Merci beaucoup, je passe en résolu

Bonne journée !