Recuperer 2 valeurs en 1 seul click

Version imprimable

Bonjour,

Je debute en jquery et je voulais savoir comment fait-on pour recuperer les 2 variables "ligne" et "col" em meme temps, afin de les envoyer en ajax pour traitement (enregistrement dans BD).

je recupere correctement les deux valeurs dans l'alert quand je clique sur la case de ma grille (10x10)

merci pour vos suggestions.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript"></script>

02/09/2018, 17h22
Invité

Bonjour,

montre le code HTML associé.

Voici le code html
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
 
<?php
// Configuration de la grille
$grid_width  = 10; // largeur de la grille
$grid_height = 10; // hauteur de la grille
$cell_width  = 25; // largeur d'une cellule
$cell_height = 25; // hauteur d'une cellule
$gutter      = 2;  // espacement des cellules
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Magic_Grid</title>
	<link rel="stylesheet" type="text/css" href="styles/magic_grid.css">
    <script type="text/javascript" src="jquery.js"></script>
 
    </head>
<body>
 
<div class="grid">
    <?php for ($w=0; $w<$grid_width; $w++): ?>
        <div class="row" id="<?php echo $w+1;?>">
        <?php for ($h=0; $h<$grid_height; $h++): ?>
            <span class="cell" id="<?php echo $h+1;?>"></span>
        <?php endfor ?>
        </div>
    <?php endfor ?>
</div>
 
<script type="text/javascript"><!--
 
$('.row').click(function(){
    var ligne = $(this).attr('id');
    alert ("ligne "+ligne);
});
$('.cell').click(function(){
    var col = $(this).attr('id');
    alert ("colonne "+col);
});
//--></script>
 
</body>
</html>

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
<div class="grid">
    <?php for ($w=0; $w<$grid_width; $w++): ?>
        <div class="row" data-row="<?php echo $w+1;?>">
        <?php for ($h=0; $h<$grid_height; $h++): ?>
            <span class="cell" data-col="<?php echo $h+1;?>"></span>
        <?php endfor ?>
        </div>
    <?php endfor ?>
</div>

Code:

1
2
3
4
5
$('.cell').on('click',function(){
    var row = $(this).parent().data('row');
    var col = $(this).data('col');
    alert ("ligne "+row+", colonne "+col);
});

03/09/2018, 00h32
Dhanphils

Merci beaucoup pour votre aide.
Bonne journee.