Utiliser la classe jquery selectable pour sélectionner des cellules d'un tableau par colonne

**aztec** · 23/07/2017, 12h22

Bonjour,
je cherche à utiliser la classe ui jquery "selectable" pour sélectionner un tableau par colonne
voici mon code javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type=\"text/javascript\">
    $(function() {
        $(\"#selectable\").selectable({
            stop: function(){
                var result = $(\"#select-result\").empty();
                $(\".ui-selected tr > :nth-child(2)\", this).each(function(){
					var contenu = $(this).text();
					result.append(contenu);
                });
            }
        });
    });
</script>

et le code du tableau (pour l'instant un simple tableau)

Code html :

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

1
2
3
4
5
6
7
8
9
10
 
<p id=\"feedback\">
You've selected: <span id=\"select-result\">none</span>.
</p>
<table id=\"selectable\">
  <tr> <th>   A </th> <th>   B </th> <th>   C </th> </tr>
  <tr> <td>   1 </td> <td>   2 </td> <td>   3 </td> </tr>
  <tr> <td>  10 </td> <td>  20 </td> <td>  30 </td> </tr>
  <tr> <td> 100 </td> <td> 200 </td> <td> 300 </td> </tr>
</table>

En fait ce code m'affiche bien par exemple le contenu dans le span des cellules de la colonne 2 mais je ne sais pas comment faire en sorte que l'utilisateur puisse sélectionner les cellules dans le sens de la colonne ? est-ce que c'est prévu dans "selectable" par jquery ? existe-t-il une autre solution?

merci pour votre aide, car je suis coincé ..

**gene69** · 24/07/2017, 08h22

le sélecteur :nth-child ?

**aztec** · 25/07/2017, 22h15

bonjour,
oui effectivement je sais utiliser nth-child pour obtenir dans mon script les valeurs d'une colonne, mais je ne sais pas comment adapter le jquery selectable pour que la selection à la souris ne se fasse que dans le sens de la colonne - et sélectionner quelques cellules dans chaque colonne mais pas toute la colonne ?

peut-être un petit exemple qui fait ça m'aiderait

merci

**aztec** · 27/07/2017, 18h54

en fait je sais utiliser nth-child pour récupérer les infos de la deuxième colonne (comme l'exemple ci-dessous), mais je ne sais pas comment faire pour que la souris ne selectionne les cellules que dans le sens d'une colonne (celle sur laquelle on se trouve au début)

Code :

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

1
2
3
4
$(\".ui-selected tr > :nth-child(2)\", this).each(function(){
					var contenu = $(this).text();
					result.append(contenu);
                });

si quelqu'un à une idée pour m'aiguiller ...

help !

**aztec** · 27/07/2017, 19h12

en fait, en rajoutant simplement la classe ui-widget-content sur les cellules, visuellement la sélection à la souris peut se faire par colonne ou par ligne (même si je voudrais uniquement par colonne)
par contre, je ne récupère pas les valeurs sélectionnées visuellement dans

Code :

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

contenu = $(\".ui-selected\").text();

il m'affiche des résultats de sélection aléatoires ...

je ne connais sans doute pas assez bien le jquery, j'ai vraiment besoin de votre support, merci

Code php :

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
<?php
print "<!doctype html>
<html lang=\"en\">
<head>
<link rel=\"stylesheet\" href=\"//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css\">";
//<link rel=\"stylesheet\" href=\"/resources/demos/style.css\">
print "<style>
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
	#selectable td { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script src=\"https://code.jquery.com/jquery-1.12.4.js\"></script>
<script src=\"https://code.jquery.com/ui/1.12.1/jquery-ui.js\"></script>
<script type=\"text/javascript\">
    $(function() {
        $(\"#selectable\").selectable({
            stop: function(){
                var result = $(\"#select-result\").empty();
					contenu = $(\".ui-selected\").text();
					result.append(contenu);
            }
        });
    });
</script>	
</head>

<body>
<div class=\"demo\">
<p id=\"feedback\">
You've selected: <span id=\"select-result\">none</span>.
</p>

<table id=\"selectable\">
  <tr> <th class=\"ui-widget-content\">   A </th> <th class=\"ui-widget-content\">   B </th> <th class=\"ui-widget-content\">   C </th> </tr>
  <tr> <td class=\"ui-widget-content\">   1 </td> <td class=\"ui-widget-content\">   2 </td> <td class=\"ui-widget-content\">   3 </td> </tr>
  <tr> <td class=\"ui-widget-content\">  10 </td> <td class=\"ui-widget-content\">  20 </td> <td class=\"ui-widget-content\">  30 </td> </tr>
  <tr> <td class=\"ui-widget-content\"> 100 </td> <td class=\"ui-widget-content\"> 200 </td> <td class=\"ui-widget-content\"> 300 </td> </tr>
</table>

</body>
</html>";
 
 
 
?>

**aztec** · 30/07/2017, 22h28

j'ai fini par trouver la solution, grâce à l'aide d'un forum étranger, je vous la poste ça peut servir à quelqu'un :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 $(function() {
        $("#selectable").selectable({
            filter: "tbody td", 
            stop: function(){
                var result = $("#select-result"),
				    contenu = $(".ui-selected").map(function(){ return $(this).text() }).get().join(", ");
				    result.text(contenu);								 
            }  // fin function stop
        });	
 
    });

Utiliser la classe jquery selectable pour sélectionner des cellules d'un tableau par colonne

jQuery

Discussions similaires

Partager

Partager