Ajouter une ligne au tableau avec la valeur d'un input

Résolu

Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018 - Modifié le 7 déc. 2017 à 12:37
Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018 - 7 déc. 2017 à 14:11

Bonjour tous le monde,

Je suis tous d'abord ravi d’être un membre de la communauté [/ Codes-sources].
Je ne trouve pas de solution par rapport a mon formulaire pour ajouter a chaque fois une ligne sur mon tableau avec les nouvelles données.

Il ne prend que la dernière ligne et la dernière valeur de mon input.

<html>
<body>

<!-- Debut-Calendrier ------->
<p>Enter Date!</p>
<input type="date" id="myDate" value="2017-10-09"><button onclick="myFunctionDate()">Validate</button>
<p id="demo"></p>
<script>
function myFunctionDate() {
    var Ladate = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = Ladate;
}
</script>
<!-- Fin-Calendrier ------------------>

<!-- Debut FORMULAIRE ------->
<p>
<label for="Qu1"></label>
<b>Ques1 : </b><input id="Q1" name="Qu1">
<label for="Qu2"></label>
<b>Ques2 : </b><input id="Q2" name="Qu2">
</p>
<p>
<label for="Qu3"></label>
<b>Ques3 : </b><input id="Q3" name="Qu3">
<label for="Qu4"></label>
<b>Ques4 : </b><input id="Q4" name="Qu4">
<label for="Qu5"></label>
<b>Ques5 : </b><input id="Q5" name="Qu5">
</p>

<!-- Fin FORMULAIRE ------->


<input type="button" onclick="javascript:addRow('matable');" value="Add."</input>

<table  id="matable" class="table" style="width:100%" style="background-color: white;" border="1"  cellpadding="0"  cellspacing="1">
<tr style="background-color: darkblue;">
<td><font color=white>Date</td>
<td><font color=white>Question 1</td>
<td><font color=white>Question 2</td>
<td><font color=white>Question 3</td>
<td><font color=white>Question 4</td>
<td><font color=white>Question 5</td>
</tr>
</table>

<script>

function addRow(tableau){
    tableau = document.getElementById(tableau);
    var tds = 6;     
    var tr = document.createElement('tr');
    for(var i=0; i<tds; i++){
        var td = document.createElement('td');
        tr.appendChild(td);
        tableau.appendChild(tr);
    td.innerHTML = document.getElementById("myDate").value;
    td.innerHTML = document.getElementById("Q1").value;
    td.innerHTML = document.getElementById("Q2").value;
    td.innerHTML = document.getElementById("Q3").value;
    td.innerHTML = document.getElementById("Q4").value;
    td.innerHTML = document.getElementById("Q5").value;
                                             
    }
}
</script>
</body>
</html>

EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45

Merci d'avance pour votre aide. Please Help.

A voir également:

Javascript ajouter une valeur dans un tableau
Ajouter un element dans un tableau java - Forum Java
Ajouter un élément dans un tableau java - Forum Java
Ajouter des entiers dans un tableau a trier dans un ordre croissant - Forum Java
AJout de ligne dans un tableau en fonction de la saisie ✓ - Forum Java
Javascript récupérer valeur d'un tableau - Forum Javascript / DHTML

1 réponse

Réponse 1 / 1

jordane45 Messages postés 37500 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 27 mai 2023 341
7 déc. 2017 à 12:46

Bonjour,

<!Doctype>
<html>
<head>
	<title>QCM</title>
	<charset="UTF-8">
</head>
<body>

<!-- Debut-Calendrier ------->
<p>Enter Date!</p>
<input type="date" id="myDate" value="2017-10-09"><button onclick="myFunctionDate()">Validate</button>
<p id="demo"></p>

<!-- Fin-Calendrier ------------------>

<!-- Debut FORMULAIRE ------->
<p>
<label for="Qu1"></label>
<b>Ques1 : </b><input id="Q1" name="Qu1">
<label for="Qu2"></label>
<b>Ques2 : </b><input id="Q2" name="Qu2">
</p>
<p>
<label for="Q3"></label>
<b>Ques3 : </b><input id="Q3" name="Qu3">
<label for="Q4"></label>
<b>Ques4 : </b><input id="Q4" name="Qu4">
<label for="Qu5"></label>
<b>Ques5 : </b><input id="Q5" name="Qu5">
</p>

<!-- Fin FORMULAIRE ------->


<input type="button" onclick="javascript:addRow('matable');" value="Add."</input>

<table  id="matable" class="table" style="width:100%" style="background-color: white;" border="1"  cellpadding="0"  cellspacing="1">
<tr style="background-color: darkblue;">
<td><font color=white>Date</td>
<td><font color=white>Question 1</td>
<td><font color=white>Question 2</td>
<td><font color=white>Question 3</td>
<td><font color=white>Question 4</td>
<td><font color=white>Question 5</td>
</tr>
</table>

<script type="text/javascript">
function myFunctionDate() {
    var Ladate = document.getElementById("myDate").value;
    document.getElementById("demo").innerHTML = Ladate;
}

function addRow(tableau){
    tableau = document.getElementById(tableau);
    var tds = 5;     
    var tr = document.createElement('tr');
	
	var td = document.createElement('td');
        tr.appendChild(td);
		td.innerHTML = document.getElementById("myDate").value;
	
    for(var i=1; i<=tds; i++){
        var td = document.createElement('td');
        tableau.appendChild(tr);
		td.innerHTML = document.getElementById("Q"+i).value;
		tr.appendChild(td);
    
    }
	tableau.appendChild(tr);
}
</script>
</body>
</html>

Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018
7 déc. 2017 à 14:11

1000 merci jordane45
encore merci
Résolu.

Discussions similaires

Accès aux réponses d'un QCM dans le code JS

recuperer le plus petite et le plus grande valeurs d'un tableau

remplir un tableau JS à partir d'une requete php

boucle pour additionner les nombres d'un array + affichage du total dans un text

en js, comment récupérer la valeur de la ligne courante de

table de multiplication

Rejoignez-nous

Les tops du mois

Explications disponibles ici :ICI

Votre réponse

Discussions similaires