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

8 réponses

Réponse 1 / 8
kinik

Personne s'y connait en js ?? bizar
0
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>
0
Réponse 3 / 8
kinik

s'il vous plait ca faiT 3 jours que je suis blocké
0
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>
0
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
0
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>
0
Réponse 7 / 8
kinik

Merci beaucoup, peu tu me donner une petite explication stp ?
0
Réponse 8 / 8
kinik

C'est bon j'ai compri, merci beaucoup
0
1. Joe
  
  Pas de quoi.
  
  0

PB affichage tableau

8 réponses

Discussions similaires

Newsletters