Modifier le contenu d'un td sans événement

Version imprimable

13/03/2010, 21h47
arthuro45

Modifier le contenu d'un td sans événement

Bonsoir,

Est-il possible de modifier le contenu d'un td sans passer par un événement ?
Sans recharger la page.
13/03/2010, 22h29
xess91
Oui c'est possible,

par exemple avec une fonction qui s'exécute seule au bout d'un temps.
Code:

1 2 3 4 5 6 7 setTimeout("Timer()",1000); Timer() { alert("je viens de modifier le contenu de mon TD"); }
Dans la fonction timer un petit script pour modifier le innerHTML du td et c'est bon.
14/03/2010, 13h41
arthuro45

Oui ca fonctionne au 1er chargement de la page :)

Mon problème reste entier, j'aimerais jouer une fonction seulement si la valeur du td est modifié.
14/03/2010, 13h44
SpaceFrog

Citation:

seulement si la valeur du td est modifié.

modifiée par rapport à quoi ? modifiée par rapport à quand ??
modifiée comment ?

Citation:

modifiée par rapport à quoi ? modifiée par rapport à quand ??
modifiée comment ?

Mon code génère un tableau html trié avec des select sur lequel je ne peux pas mettre d'événement car ils sont générés dynamiquement par une librairie (du moins je ne sais le faire) : http://www.developpez.net/forums/d89...max-guglielmi/

Quand je tri ce tableau je somme une des colonnes et j'affiche le résultat dans un td, je traite ensuite ce td en formatant son contenu : http://www.developpez.net/forums/d89...u/#post5060451

A chaque nouveau tri du tableau, le contenu du td change, comment faire pour récupérer la nouvelle valeur du td pour la traiter sans avoir besoin de mettre un évènement on change sur le select (car je ne sais pas faire) ?

Voici le code :

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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<?php include('doctype/doctype.php'); ?>
<link rel="stylesheet" type="text/css" href="styles/default.css" >
<link rel="stylesheet" href="js/filtergrid.css" type="text/css" >
<script language="JavaScript" src="js/tablefilter.js"></script>
<script language="javascript" type="text/javascript">
 
function convert_nombre()
{
var duree = document.getElementById('Tot1').innerHTML;
 
compter_Nbchiffre = (duree.length); // Compte le nombre de chiffre dans durée
 
PremierChiffre = duree.substr(0,1); // retourne le premier chiffres de la durée en partant de la gauche
DeuxpremierChiffre = duree.substr(0,2); // retourne les 2 premiers chiffres de la durée en partant de la gauche
TroispremierChiffre = duree.substr(0,3); // retourne les 3 premiers chiffres de la durée en partant de la gauche
QuatrepremierChiffre = duree.substr(0,4); // retourne les 4 premiers chiffres de la durée en partant de la gauche
CinqpremierChiffre = duree.substr(0,5); // retourne les 5 premiers chiffres de la durée en partant de la gauche
DernierChiffre = duree.substring(duree.length-2, duree.length); //Retourne les 2 derniers chiffres de duree en partant de la droite
 
alert(DernierChiffre); // Pour test
//alert(compter_Nbchiffre+' '+PremierChiffre+' '+DeuxpremierChiffre+' '+TroispremierChiffre+' '+DernierChiffre); // Pour test
 
var minute_en_heure = Math.floor(DernierChiffre/60)+"h"+(DernierChiffre%60); //Conversion minute en heure (ex: 0h30 pour duree = 30)
var p = minute_en_heure.split('h');
var h1 = parseInt(p[0]); // Extraction des heures
var minute = p[1]; // Extraction des minutes
// Conversion des string en integer pour les sommes.
var Pchiffre = parseInt(PremierChiffre);
var Dchiffre = parseInt(DeuxpremierChiffre);
var Tchiffre = parseInt(TroispremierChiffre);
var Qchiffre = parseInt(QuatrepremierChiffre);
var Cchiffre = parseInt(CinqpremierChiffre);
 
var heure1 = minute_en_heure; // Si duree = 2 chiffres.
var heure2 = h1+Pchiffre+'h'+minute;
var heure3 = h1+Dchiffre+'h'+minute;
var heure4 = h1+Tchiffre+'h'+minute;
var heure5 = h1+Qchiffre+'h'+minute;
var heure6 = h1+Cchiffre+'h'+minute;
 
	switch (compter_Nbchiffre){
	case 2:
		alert (heure1);
					break;
	case 3:
		alert (heure2);
					break;
	case 4:
		alert (heure3);
					break;
	case 5:
		alert (heure4);
					break;
	case 6:
		alert (heure5);
					break;
	case 7:
		alert (heure6);
					break;
			default :
					break;
	}
}
</script>
</head>
<body>
 
<table>
			<tr>
				<td id="Tot1"></td>
			</tr>
</table>
 
<table id="tableau">
<thead>
		<tr>
		<th class="th" style="width:70px;">Date</th>
		<th class="th" style="width:70px;">Matricule</th>
		<th class="th" style="width:180px;">Nom   Prénom</th>
		<th class="th" style="width:70px;">Equipe</th>
		<th class="th" style="width:309px;">Activité</th>
		<th class="th" style="width:10px;">Prod</th>
		<th class="th" style="width:20px;">Unité</th>
		<th class="th" style="width:60px;">Durée</th>
		</tr>
</thead>
<tbody>
		<tr>
		<td class="td"><?php echo $row['Date début']; ?></td>
		<td class="td"><?php echo $row['Matricule']; ?></td>
		<td class="td" nowrap><?php echo $row['Nom   Prénom']; ?></td>
		<td class="td"><?php echo $row['Equipe']; ?></td>
		<td class="td" nowrap><?php echo $row['Activité']; ?></td>
		<td class="td"><?php echo $row['prod']; ?></td>
		<td class="td"><?php echo $row['Unité']; ?></td>
		<td class="td"><?php echo $duree; ?></td>
		</tr>
</tbody>
</table>
 
<script language="javascript" type="text/javascript"> 
var totRowIndex = tf_Tag(tf_Id('tableau'),"tr").length;		
    var tf_table2_Props = {
		sort: false,
		filters_row_index: 1, //position liste déroulante
		remember_grid_values: true,
		remember_page_number: false,
		remember_page_length: false, // Se souvenir du dernier tri...
		alternate_rows: true,
		paging: false,
		results_per_page: ['Résultats par page',[26,40,50,120]],
		rows_counter: true,
		rows_counter_text: "Nombre de lignes : ",
		tot_rows_css_class: 'bandeau_tableau',
		loader: true,
		loader_css_class: "myLoader",
		loader_html: '<img src="./js/img/loader.gif" alt="" style="vertical-align:middle; margin-right:5px;" />Chargement du tableau...',
		status_bar: false,
		btn_reset: true,
		btn_reset_text: "Réinitialiser",
		btn_reset_css_class: "bandeau_tableau",
		fixed_headers: true,
		tbody_height: 600,
		col_operation: {    
                    id: ["Tot1"],//id de la colonne html à sommer 
                    col: [7],//Numéro des colonnes à sommer  
                    operation: ["sum"],//Mode de cacul  
                    write_method: ["innerHTML"], //Une method par colonne.  
                    decimal_precision: [0,0]//Nombre de chiffre après la virgule.
                   },
		sort_select: true,
		col_0: "select",
		col_1: "select",
		col_2: "select",
		col_3: "select",
		col_4: "select",
		col_5: "select",
		col_6: "select",
		col_7: "select",
		inf_div_css_class: "inf",   
		display_all_text: "--Tous--"
	}
	setFilterGrid("tableau",tf_table2_Props);
</script> 
</form>
<?php include('presentation/footer.php'); ?>

Il fallait que je fasse vite. J'ai opté pour un bouton avec événement. Ce n'est pas propre mais ça fonctionne en attendant mieux.

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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<?php include('doctype/doctype.php'); ?>
<link rel="stylesheet" type="text/css" href="styles/default.css" >
<link rel="stylesheet" href="js/filtergrid.css" type="text/css" >
<script language="JavaScript" src="js/tablefilter.js"></script>
<script language="javascript" type="text/javascript">
 
function convert_nombre()
{
var duree = document.getElementById('Tot1').innerHTML;
//alert(duree);
 
compter_Nbchiffre = (duree.length); // Compte le nombre de chiffre dans durée
 
PremierChiffre = duree.substr(0,1); // retourne le premier chiffres de la durée en partant de la gauche
DeuxpremierChiffre = duree.substr(0,2); // retourne les 2 premiers chiffres de la durée en partant de la gauche
TroispremierChiffre = duree.substr(0,3); // retourne les 3 premiers chiffres de la durée en partant de la gauche
QuatrepremierChiffre = duree.substr(0,4); // retourne les 4 premiers chiffres de la durée en partant de la gauche
CinqpremierChiffre = duree.substr(0,5); // retourne les 5 premiers chiffres de la durée en partant de la gauche
DernierChiffre = duree.substring(duree.length-2, duree.length); //Retourne les 2 derniers chiffres de duree en partant de la droite
 
//alert(DernierChiffre); // Pour test
//alert(compter_Nbchiffre+' '+PremierChiffre+' '+DeuxpremierChiffre+' '+TroispremierChiffre+' '+DernierChiffre); // Pour test
 
var minute_en_heure = Math.floor(DernierChiffre/60)+"h"+(DernierChiffre%60); //Conversion minute en heure (ex: 0h30 pour duree = 30)
var p = minute_en_heure.split('h');
var h1 = parseInt(p[0]); // Extraction des heures
var minute = p[1]; // Extraction des minutes
// Conversion des string en integer pour les sommes.
var Pchiffre = parseInt(PremierChiffre);
var Dchiffre = parseInt(DeuxpremierChiffre);
var Tchiffre = parseInt(TroispremierChiffre);
var Qchiffre = parseInt(QuatrepremierChiffre);
var Cchiffre = parseInt(CinqpremierChiffre);
 
var heure1 = minute_en_heure; // Si duree = 2 chiffres.
var heure2 = h1+Pchiffre+'h'+minute;
var heure3 = h1+Dchiffre+'h'+minute;
var heure4 = h1+Tchiffre+'h'+minute;
var heure5 = h1+Qchiffre+'h'+minute;
var heure6 = h1+Cchiffre+'h'+minute;
 
	switch (compter_Nbchiffre){
	case 2:
		document.getElementById('Tot1').innerHTML = heure1;
					break;
	case 3:
		document.getElementById('Tot1').innerHTML = heure2;
					break;
	case 4:
		document.getElementById('Tot1').innerHTML = heure3;
					break;
	case 5:
		document.getElementById('Tot1').innerHTML = heure4;
					break;
	case 6:
		document.getElementById('Tot1').innerHTML = heure5;
					break;
	case 7:
		document.getElementById('Tot1').innerHTML = heure6;
					break;
			default :
					break;
	}
}
</script>
</head>
<body>
 
<table>
			<tr>
				<td id="Tot1"></td>
				<td><input type="button" id="valider" value="Conversion" onclick="convert_nombre()"></a></td>
			</tr>
</table>
 
<table id="tableau">
<thead>
		<tr>
		<th class="th" style="width:70px;">Date</th>
		<th class="th" style="width:70px;">Matricule</th>
		<th class="th" style="width:180px;">Nom   Prénom</th>
		<th class="th" style="width:70px;">Equipe</th>
		<th class="th" style="width:309px;">Activité</th>
		<th class="th" style="width:10px;">Prod</th>
		<th class="th" style="width:20px;">Unité</th>
		<th class="th" style="width:60px;">Durée</th>
		</tr>
</thead>
<tbody>
		<tr>
		<td class="td"><?php echo $row['Date début']; ?></td>
		<td class="td"><?php echo $row['Matricule']; ?></td>
		<td class="td" nowrap><?php echo $row['Nom   Prénom']; ?></td>
		<td class="td"><?php echo $row['Equipe']; ?></td>
		<td class="td" nowrap><?php echo $row['Activité']; ?></td>
		<td class="td"><?php echo $row['prod']; ?></td>
		<td class="td"><?php echo $row['Unité']; ?></td>
		<td class="td"><?php echo $duree; ?></td>
		</tr>
</tbody>
</table>
 
<script language="javascript" type="text/javascript"> 
var totRowIndex = tf_Tag(tf_Id('tableau'),"tr").length;		
    var tf_table2_Props = {
		sort: false,
		filters_row_index: 1, //position liste déroulante
		remember_grid_values: true,
		remember_page_number: false,
		remember_page_length: false, // Se souvenir du dernier tri...
		alternate_rows: true,
		paging: false,
		results_per_page: ['Résultats par page',[26,40,50,120]],
		rows_counter: true,
		rows_counter_text: "Nombre de lignes : ",
		tot_rows_css_class: 'bandeau_tableau',
		loader: true,
		loader_css_class: "myLoader",
		loader_html: '<img src="./js/img/loader.gif" alt="" style="vertical-align:middle; margin-right:5px;" />Chargement du tableau...',
		status_bar: false,
		btn_reset: true,
		btn_reset_text: "Réinitialiser",
		btn_reset_css_class: "bandeau_tableau",
		fixed_headers: true,
		tbody_height: 600,
		col_operation: {    
                    id: ["Tot1"],//id de la colonne html à sommer 
                    col: [7],//Numéro des colonnes à sommer  
                    operation: ["sum"],//Mode de cacul  
                    write_method: ["innerHTML"], //Une method par colonne.  
                    decimal_precision: [0,0]//Nombre de chiffre après la virgule.
                   },
		sort_select: true,
		col_0: "select",
		col_1: "select",
		col_2: "select",
		col_3: "select",
		col_4: "select",
		col_5: "select",
		col_6: "select",
		col_7: "select",
		inf_div_css_class: "inf",   
		display_all_text: "--Tous--"
	}
	setFilterGrid("tableau",tf_table2_Props);
</script> 
</form>
<?php include('presentation/footer.php'); ?>