Ajouter une ligne au tableau avec la valeur d'un input [Résolu]

Zico250814 9 Messages postés jeudi 7 décembre 2017Date d'inscription 25 avril 2018 Dernière intervention - 7 déc. 2017 à 12:26 - Dernière réponse : Zico250814 9 Messages postés jeudi 7 décembre 2017Date d'inscription 25 avril 2018 Dernière intervention
- 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.
Afficher la suite 

Votre réponse

2 réponses

jordane45 21644 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 16 juillet 2018 Dernière intervention - 7 déc. 2017 à 12:46
0
Merci
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 9 Messages postés jeudi 7 décembre 2017Date d'inscription 25 avril 2018 Dernière intervention - 7 déc. 2017 à 14:11
1000 merci jordane45
encore merci
Résolu.
Commenter la réponse de jordane45

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.