Modifier l'url d'un lien via la selection d'un checkbox

**dialac** · 30/06/2011, 20h18

Bonjour a tous
je vous expose mon problème. je travaille avec le zend framework dans une architecture mvc, tous marche parfaitement (la récupération de donnés en base ect...) simplement je voudrais crée devant chaque ligne de ma table une td contenant un champ checkbox. cette checkbox des qu'elle est sélectionné doit entrainé grâce à jquery la modification de l'attribut href d'un lien <a> ayant la class ="formlien" afin juste d'y rajouté la valeur d'une cellule (ex : la cellule de la ligne sélectionné qui correspondant a la colonne id)
il vaudras également que le fait de sélection la ligne entraine que le checkbox quelle contient soit cochés comme un bandeau de sélection.

code de la table

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
<table>
 
	<tr>	
 
		<th>id</th>
 
		<th>Numero de porte</th>
 
		<th>Montant du Loyer</th>
 
		<th>Niveau d'étage</th>
 
		<th>Type d'appartement</th>
 
		<th>Immeuble</th>
 
	</tr>
 
			<tr style="background-color:#fff">
                        <td><input type="checkbox" name = "selection" /></td>
			<td>1</td>
 
			<td>1</td>
 
			<td>22000</td>
 
			<td>1</td>
 
			<td>1</td>
 
			<td>1</td>
 
		</tr>	
 
			<tr style="background-color:#fbfbfb">
                         <td><input type="checkbox" name = "selection" /></td>
 
			<td>2</td>
 
			<td>2</td>
 
			<td>35000</td>
 
			<td>2</td>
 
			<td>2</td>
 
			<td>1</td>
 
		</tr>	
 
	</table></div>

et le code de la zone des liens

Code :

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

1
2
3
4
5
6
 
     <ul>
            <li><a class='formlien' href="/mvctuto/public/pays/ajouter/id/">Modifier</a></li>
            <li><a class='formlien' href="/mvctuto/public/pays/modifier/id/">Modifier</a></li>
            <li><a class='formlien' href="/mvctuto/public/pays/supprimer/id/">Modifier</a></li>
    </ul>

en clair je voudrais que quand je clique sur le checkbox de la première ligne (ou que je sélectionne la première ligne) jquery ajoute le contenu de la td qui correspond à id à la suite lien pour donné:

Code :

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

1
2
3
4
5
6
 
     <ul>
            <li><a class='formlien' href="/mvctuto/public/pays/ajouter/id/1">Modifier</a></li>
            <li><a class='formlien' href="/mvctuto/public/pays/modifier/id/1">Modifier</a></li>
            <li><a class='formlien' href="/mvctuto/public/pays/supprimer/id/1">Modifier</a></li>
    </ul>

**micetf** · 30/06/2011, 22h24

Et que doit-il se passer si tu cliques sur la troisième ligne ?

Allez, un petit bout de code pour t'aider à démarrer :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function() {
	$('input[name=selection]').click(function() {
		if ($(this).attr('checked')) {
			alert($(this).parent().next().text());
		}
	});
});
</script>

**dialac** · 02/07/2011, 13h11

merci micetf

je vais essayer de commencer par là et je t'informerai

**danielhagnoul** · 03/07/2011, 00h35

Bonsoir

@micetf : le problème est plus complexe qu'il semble au premier abord.

Des "checkbox" ou des "radio" ? Un choix d'ID ou plusieurs en même temps.

N'oubliez pas d'ajouter un th correspondant au nouveau td, et les tags thead et tbody.

Un id doit être unique et il doit toujours commencer par une lettre

L'utilisateur peut changer d'avis plusieurs fois.

Voici un exemple pour des inputs radio :

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; background-color:#ffffff; color:#000000; border:1px solid #666666; }
 
		/* --- */
		td {padding:6px; border:1px dotted grey; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<table id="tableID">
	<thead>
		<tr>	
			<th>Chk</th>
			<th>id</th>
			<th>Numero de porte</th>
			<th>Montant du Loyer</th>
			<th>Niveau d'étage</th>
			<th>Type d'appartement</th>
			<th>Immeuble</th>
		</tr>
	</thead>
	<tbody>
		<tr>
            <td><input type="radio" name="selection"/></td>
			<td>id1</td>
			<td>1</td>
			<td>22000</td>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>	
		<tr>
            <td><input type="radio" name="selection"/></td>
			<td>id200</td>
			<td>2</td>
			<td>35000</td>
			<td>2</td>
			<td>2</td>
			<td>1</td>
		</tr>
	</tbody>
</table>
 
<ul>
	<li><a class='formlien' href="/mvctuto/public/pays/ajouter/id/">Modifier</a></li>
	<li><a class='formlien' href="/mvctuto/public/pays/modifier/id/">Modifier</a></li>
	<li><a class='formlien' href="/mvctuto/public/pays/supprimer/id/">Modifier</a></li>
</ul>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-07-03T00:35:00.000+02:00" pubdate>2011-07-03</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
			/* -- */
 
$("input[type='radio'][name='selection']").change(function(){
	if ($(this).prop("checked")){
		var n = "/" + $(this).parent().next("td").text(), tab = [];
 
		$("#tableID > tbody > tr").css("backgroundColor", "white");
		$(this).parents("tr").css("backgroundColor", "lightgreen");
 
		$("a.formlien").each(function(i, item){
			tab = $(item).attr("href").split("/");
			tab.pop();
 
			$(item).attr("href", tab.join("/") + n);
		})
	} else {
		$("a.formlien").each(function(i, item){
			tab = $(item).attr("href").split("/");
			tab.pop();
 
			$(item).attr("href", tab.join("/"));
		})
	}
});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>