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

Version imprimable

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

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:

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é ..

24/07/2017, 08h22
gene69

le sélecteur :nth-child ?
25/07/2017, 22h15
aztec

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
27/07/2017, 18h54
aztec
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:

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 !

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:

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:

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>";
 
 
 
?>

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:

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
        });	
 
    });