Sujet Précédent Sujet Suivant

PB affichage tableau

Résolu/Fermé
kinik - 30 janv. 2012 à 17:27
 Joe - 1 févr. 2012 à 13:39
Bonjour,
je suis debutant en javascript, j'ai creer une application qui additionne les valeurs des imput coché par l'utilisateur, et fourni le detail des imputs dans un tableau une fois clique sur une case. Tous marche bien, mais un tableau s'affiche sur un autre quand une nouvelle case est coché, comment faire pour n'avoir qu'un seul tableau qui se modifie selon les cas pluto que plusieurs tableau pour chaque cas.


8 réponses

Réponse 1 / 8
kinik
31 janv. 2012 à 13:37
Personne s'y connait en js ?? bizar
0
Réponse 2 / 8
kinik
Modifié par kinik le 1/02/2012 à 11:18
voici le code
coche des cases et clickez consecutivement



</form>
</aside>
<article>

<form method="post" action="traitement.php" >


<span class="code" >Comment tu t'appelle ?</span><br>

<input type="checkbox" name="cafe" value ="20" />cafe
<input type="checkbox" name="frittes" value ="18" />frites
<input type="checkbox" name="burger" value ="3" />burger
<input type="button" value="Envoyer" onclick="dar(); "/>


<P id="p">


<script>
var inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length,
body = document.getElementsByTagName("body")[0],
row = document.createElement("tr"),
row1 = document.createElement("tr"),
row2 = document.createElement("tr"),
row3 = document.createElement("tr"),
row4 = document.createElement("tr"),
th = document.createElement("th");
function dar()
{

for (var i = 0 ; i < inputsLength; i++) {
if ( inputs[0].checked && inputs[1].checked && inputs[2].checked )
{

table = document.createElement("table");
tablebody = document.createElement("tbody");

texte = document.createTextNode("produits");
th.appendChild(texte);
row.appendChild(th);
th = document.createElement("th");
texte = document.createTextNode("prix €");
th.appendChild(texte);
row.appendChild(th);


cell = document.createElement("td");
texte = document.createTextNode(inputs[0].name);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[0].value);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[1].name);
cell.appendChild(texte);
row2.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[1].value);
cell.appendChild(texte);
row2.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[2].name);
cell.appendChild(texte);
row3.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[2].value);
cell.appendChild(texte);
row3.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode("Prix total");
cell.appendChild(texte);
row4.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(parseFloat(inputs[0].value)+ parseFloat(inputs[1].value) + parseFloat(inputs[2].value));
cell.appendChild(texte);
row4.appendChild(cell);

tablebody.appendChild(row);
tablebody.appendChild(row1);
tablebody.appendChild(row2);
tablebody.appendChild(row3);
tablebody.appendChild(row4);



table.appendChild(tablebody);

body.appendChild(table);

table.setAttribute("border", "1");

break;
} else if( inputs[0].checked && inputs[1].checked )
{


table = document.createElement("table");
tablebody = document.createElement("tbody");

texte = document.createTextNode("produits");
th.appendChild(texte);
row.appendChild(th);
th = document.createElement("th");
texte = document.createTextNode("prix €");
th.appendChild(texte);
row.appendChild(th);


cell = document.createElement("td");
texte = document.createTextNode(inputs[0].name);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[0].value);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[1].name);
cell.appendChild(texte);
row2.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[1].value);
cell.appendChild(texte);
row2.appendChild(cell);

cell = document.createElement("td");
texte = document.createTextNode("Prix total");
cell.appendChild(texte);
row3.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(parseFloat(inputs[0].value)+ parseFloat(inputs[1].value));
cell.appendChild(texte);
row3.appendChild(cell);

tablebody.appendChild(row);
tablebody.appendChild(row1);
tablebody.appendChild(row2);
tablebody.appendChild(row3);



table.appendChild(tablebody);

body.appendChild(table);

table.setAttribute("border", "2");

break;
} else if ( inputs[0].checked && inputs[2].checked )
{


table = document.createElement("table");
tablebody = document.createElement("tbody");

texte = document.createTextNode("produits");
th.appendChild(texte);
row.appendChild(th);
th = document.createElement("th");
texte = document.createTextNode("prix €");
th.appendChild(texte);
row.appendChild(th);


cell = document.createElement("td");
texte = document.createTextNode(inputs[0].name);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[0].value);
cell.appendChild(texte);
row1.appendChild(cell);

cell = document.createElement("td");
texte = document.createTextNode(inputs[2].name);
cell.appendChild(texte);
row2.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[2].value);
cell.appendChild(texte);
row2.appendChild(cell);


cell = document.createElement("td");
texte = document.createTextNode("Prix total");
cell.appendChild(texte);
row3.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(parseFloat(inputs[0].value) + parseFloat(inputs[2].value));
cell.appendChild(texte);
row3.appendChild(cell);

tablebody.appendChild(row);
tablebody.appendChild(row1);
tablebody.appendChild(row2);
tablebody.appendChild(row3);

table.appendChild(tablebody);

body.appendChild(table);

table.setAttribute("border", "2");
break;
} else if ( inputs[1].checked && inputs[2].checked )
{


table = document.createElement("table");
tablebody = document.createElement("tbody");

texte = document.createTextNode("produits");
th.appendChild(texte);
row.appendChild(th);
th = document.createElement("th");
texte = document.createTextNode("prix €");
th.appendChild(texte);
row.appendChild(th);

cell = document.createElement("td");
texte = document.createTextNode(inputs[1].name);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[1].value);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[2].name);
cell.appendChild(texte);
row2.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[2].value);
cell.appendChild(texte);
row2.appendChild(cell);

cell = document.createElement("td");
texte = document.createTextNode("Prix total");
cell.appendChild(texte);
row3.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(parseFloat(inputs[1].value) + parseFloat(inputs[2].value));
cell.appendChild(texte);
row3.appendChild(cell);

tablebody.appendChild(row);
tablebody.appendChild(row1);
tablebody.appendChild(row2);
tablebody.appendChild(row3);


table.appendChild(tablebody);

body.appendChild(table);

table.setAttribute("border", "2");
break;
} else if (inputs[i].type == 'checkbox' && inputs[i].checked) {



table = document.createElement("table");
tablebody = document.createElement("tbody");

texte = document.createTextNode("produits");
th.appendChild(texte);
row.appendChild(th);
th = document.createElement("th");
texte = document.createTextNode("prix €");
th.appendChild(texte);
row.appendChild(th);


cell = document.createElement("td");
texte = document.createTextNode(inputs[i].name);
cell.appendChild(texte);
row1.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[i].value);
cell.appendChild(texte);
row1.appendChild(cell);


cell = document.createElement("td");
texte = document.createTextNode("Prix total");
cell.appendChild(texte);
row2.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(parseFloat(inputs[i].value));
cell.appendChild(texte);
row2.appendChild(cell);

tablebody.appendChild(row);
tablebody.appendChild(row1);
tablebody.appendChild(row2);
tablebody.appendChild(row3);

table.appendChild(tablebody);
body.appendChild(table);
table.setAttribute("border", "2");


}}
}

</script>
</p>

</form>
0
Réponse 3 / 8
kinik
1 févr. 2012 à 11:35
s'il vous plait ca faiT 3 jours que je suis blocké
0
Réponse 4 / 8
Joe
1 févr. 2012 à 11:57
J'ai réécrit tout ton code. Il est beaucoup plus lisible, beaucoup plus simple, et il fait ce que tu veux (si j'ai bien compris).


<article>

<span class="code" >Comment tu t'appelle ?</span><br>

<input type="checkbox" name="cafe" value ="20" />cafe
<input type="checkbox" name="frittes" value ="18" />frites
<input type="checkbox" name="burger" value ="3" />burger
<input type="button" value="Envoyer" onclick="dar(); "/>


<script>
var inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length,
body = document.getElementsByTagName("body")[0];

function dar()
{
var th = document.createElement("th");
var row = document.createElement("tr");
var prixTotal = 0;

var table = document.createElement("table");
var tablebody = document.createElement("tbody");

texte = document.createTextNode("produits");
th.appendChild(texte);
row.appendChild(th);
th = document.createElement("th");
texte = document.createTextNode("prix €");
th.appendChild(texte);
row.appendChild(th);
tablebody.appendChild(row);

for (var i = 0 ; i < inputsLength; i++)
{
if (inputs[i].checked)
{
var row = document.createElement("tr");
var cell = document.createElement("td");
var texte = document.createTextNode(inputs[i].name);
cell.appendChild(texte);
row.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[i].value);
cell.appendChild(texte);
row.appendChild(cell);
tablebody.appendChild(row);

prixTotal += parseFloat(inputs[i].value);
}
}

row = document.createElement("tr");
cell = document.createElement("td");
texte = document.createTextNode("Prix total");
cell.appendChild(texte);
row.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(prixTotal);
cell.appendChild(texte);
row.appendChild(cell);

tablebody.appendChild(row);
table.appendChild(tablebody);
body.appendChild(table);
table.setAttribute("border", "2");

}

</script>

</article>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
kinik
Modifié par kinik le 1/02/2012 à 13:12
Bonjour et merci d'avoir repondu, en effet le code est beaucoup plus lisible, mais en faite je cherche a modifier le comportement de onclick de maniere a ce qu'il n'affiche qu'une seul fois 1 tableau qui se modifie selon les condition (cases checked) pluto que plusieurs tableaux quand l'evenement onclick est declenché a multiple reprise donc quand on clique plusieur fois;

cordialement
0
Réponse 6 / 8
Joe
1 févr. 2012 à 13:25
Voila :

<article>

<span class="code" >Comment tu t'appelle ?</span><br>

<input type="checkbox" name="cafe" value ="20" />cafe
<input type="checkbox" name="frittes" value ="18" />frites
<input type="checkbox" name="burger" value ="3" />burger
<input type="button" value="Envoyer" onclick="dar(); "/>


<script>
var inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length,
body = document.getElementsByTagName("body")[0];

var divProduits = document.createElement("div");
divProduits.id = "divProduits";
var table = document.createElement("table");
table.id = "produits";
divProduits.appendChild(table);
body.appendChild(divProduits);

function dar()
{
var th = document.createElement("th");
var row = document.createElement("tr");
var prixTotal = 0;
var tablebody = document.createElement("tbody");

var divProduits = document.getElementById("divProduits");
var table = document.getElementById("produits");
divProduits.removeChild( table );

var table = document.createElement("table");
table.id = "produits";
divProduits.appendChild(table);

texte = document.createTextNode("produits");
th.appendChild(texte);
row.appendChild(th);
th = document.createElement("th");
texte = document.createTextNode("prix €");
th.appendChild(texte);
row.appendChild(th);
tablebody.appendChild(row);

for (var i = 0 ; i < inputsLength; i++)
{
if (inputs[i].checked)
{
var row = document.createElement("tr");
var cell = document.createElement("td");
var texte = document.createTextNode(inputs[i].name);
cell.appendChild(texte);
row.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(inputs[i].value);
cell.appendChild(texte);
row.appendChild(cell);
tablebody.appendChild(row);

prixTotal += parseFloat(inputs[i].value);
}
}

row = document.createElement("tr");
cell = document.createElement("td");
texte = document.createTextNode("Prix total");
cell.appendChild(texte);
row.appendChild(cell);
cell = document.createElement("td");
texte = document.createTextNode(prixTotal);
cell.appendChild(texte);
row.appendChild(cell);

tablebody.appendChild(row);
table.appendChild(tablebody);
table.setAttribute("border", "2");

}

</script>

</article>
0
Réponse 7 / 8
kinik
1 févr. 2012 à 13:31
Merci beaucoup, peu tu me donner une petite explication stp ?
0
Réponse 8 / 8
kinik
1 févr. 2012 à 13:37
C'est bon j'ai compri, merci beaucoup
0
Joe
1 févr. 2012 à 13:39
Pas de quoi.
0

Discussions similaires

ou sont les bananes ?
Liline -
Le Pro -

2 réponses
Nom de champs du tableau croisé dynamique non valide
Kazooie123 -
SajDri -

6 réponses
generateur de combinaison du loto 5/90
Riccilo -
ccm81 -

3 réponses
adele
marine carnet-pantier -
irongege -

2 réponses
Bibliothèque
cosjac85 -
renard bleu -

3 réponses