PB affichage tableau
Résolu
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.
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
-
C'est bon j'ai compri, merci beaucoup
-
Merci beaucoup, peu tu me donner une petite explication stp ?
-
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> -
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 -
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> -
s'il vous plait ca faiT 3 jours que je suis blocké
-
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> -
Personne s'y connait en js ?? bizar
