PB affichage tableau

Résolu

kinik -
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.

Afficher la suite

A voir également:

PB affichage tableau
Tableau word - Guide
Tableau ascii - Guide
Trier un tableau excel - Guide
Tableau croisé dynamique - Guide
Imprimer tableau excel sur une page - Guide

8 réponses

Réponse 1 / 8

kinik

Personne s'y connait en js ?? bizar

Réponse 2 / 8

kinik

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>

Réponse 3 / 8

kinik

s'il vous plait ca faiT 3 jours que je suis blocké

Réponse 4 / 8

Joe

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>

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

Posez votre question

Réponse 5 / 8

kinik

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

Réponse 6 / 8

Joe

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>

Réponse 7 / 8

kinik

Merci beaucoup, peu tu me donner une petite explication stp ?

Réponse 8 / 8

kinik

C'est bon j'ai compri, merci beaucoup

Joe

Pas de quoi.

Discussions similaires

Formule taux de marque

Tableau croisé dynamique - absence de certaines données

Votre réponse

Discussions similaires