Re: Calcul instantané

On 10 mai, 17:15, SAM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:

SAM a écrit :

Voici donc à adapter avec la page du form

et voici adapté :

<html>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

function purge(nbre) {
nbre = nbre.replace(',','.');
nbre = nbre.replace(/([^0-9 ^.]|\.{2,5}|\s)/g,'');
return nbre*1; // on renvoie un nombre

}

function nbr2txt(n) {
return n.toString().replace('.',',');

}

function ajou(quoi) {
// trouver le table contenant l'élément 'quoi'
var f = quoi.parentNode;
while(f.tagName != 'TABLE') f = f.parentNode;
// en extraire le nbre de rangées du tbody
var r = f.getElementsByTagName('TBODY')[0];
r = r.getElementsByTagName('TR').length+1;
// collection des inputs voulus
f = f.getElementsByTagName('INPUT');
var c = f.length;
var n = c/r;
// correction des nombres de rangées et colonnes
c = +c-n; // toutes cellules sauf celles de dernière rangée
r = +r-1; // toutes cellules de rangée sauf dernière
// tableau des totaux par colonne
var tot = [];
// création des totaux par colonnes (totaux mis à zéro)
// la dernière colonne (total de la rangée) est ignorée
for(var i=0; i<n-1; i++) { tot[i] = 0; }
// pour le sous-total de la rangée
var sstot = 0;

// boucle avec un pas de n (boucle sur les rangées)
for(var i=0; i<c; i=i+n) {
sstot = 0; // le sous-total de la rangée est mis à zéro
// boucle sur les inputs de la rangée
for(var j=0; j<(n-1); j++) {
tot[j] += purge(f[+i+j].value); // total de la colonne
sstot += purge(f[+i+j].value); // total de la rangée
}
f[+i+n-1].value = nbr2txt(sstot); // affichage total rangée
}

// la dernière rangée, celle des totaux
sstot = 0;
for(var i=0; i<n-1; i++) { // boucle sur les inputs de la rangée
f[c+i].value = nbr2txt(tot[i]); // affichage du total de la colonne
sstot += tot[i]; // sous-total de la rangée
}
f[c+n-1].value = nbr2txt(sstot); // affichage du total général

}

</script>

<style type="text/css">
form { width: 700px; }
tr th:first-child, tr td:first-child { text-align: right; }
th, td { text-align: center }
input { width: 10em; text-align: center }
input:focus { background: #ff8 }
th input, tfoot td input { border: solid 2px red; background: #eee }
tfoot th input { border: solid 2px blue; background: #eee }
</style>

<form name="form1">
<fieldset>
<legend>[<strong>NB d'adhérents</strong>] Saison
Ecoulée 2006-2007</legend>
<table width="100%" border="0">
<thead>
<tr>
<th> </th>
<th>Maurepas</th>
<th>Autres communes</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td height="26" >Adultes</td>
<td><input tabindex="1" name="last_adultes_maurepas"
onchange="ajou(this)" /></td>
<td><input tabindex="2" name="last_adultes_autre"
onchange="ajou(this)" /></td>
<th><input name="totalfinal01_adulte" readonly="true"
id="totalfinal01_adulte"/></th>
</tr>
<tr>
<td>De 12 à 18 ans</td>
<td><input tabindex="3" name="_last_ado_maurepas"
onchange="ajou(this)"/></td>
<td><input tabindex="5" name="last_ado_autre"
onchange="ajou(this)"/></td>
<th><input name="totalfinal01_18" readonly="true"
id="totalfinal01_18"/></th>
</tr>
<tr>
<td>Moins de 12 ans</td>
<td><input tabindex="6" name="_last_enfant_maurepas"
onChange="ajou(this)"/></td>
<td><input tabindex="7" name="last_enfant_autre"
onchange="ajou(this)" /></td>
<th><input name="totalfinal01_12" readonly="true"
id="totalfinal01_12"/></th>
</tr>
</tbody>
<tfoot>
<tr>
<th>TOTAL</th>
<td><input name="total_maurepas" readonly="true"/></td>
<td><input name="total2" readonly="true"/></td>
<th><input name="totalglobal01" readonly="true"
id="totalglobal01"/></th>
</tr>
</tfoot>
</table>
</fieldset>

</form>
</html>

Attention !
Pour que ça fonctionne :
bien respecter le balisage tbody thead tfoot
tabindexer depuis le premier input ?
chaque tabindex doit être unique
Erreur dans la page d'origine :
des éléments de form sont en-dehors du form
Le code général un peu surabondant :
plein de divs inutiles
de même que des 'strong' facilement remplaçables par des th
les sizes des inputs
les styles individuels qu'on retrouve à plusieurs endroits

--
sm

Merci,
c'est nikel !
P'têtre qu'un jour j'arriverais à faire tout ça tout seul (on ne sais
jamais :D )

en attendant, voici ce que ça donne :
http://pagesperso-orange.fr/pasdenomdesite/formulaire_omlc/formu_omlc.html
(j'ai fais un peu de nettoyage dans le code, mais il m'en reste encore
pas mal à faire)

Merci encore ;)

fr . comp . lang . javascript

Re: Calcul instantané sur Fr Comp Lang Javascript

fr . comp . lang . javascript

Re: Calcul instantané