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

Messages postés
9
Date d'inscription
jeudi 7 décembre 2017
Statut
Membre
Dernière intervention
25 avril 2018
-
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 

1 réponse

Messages postés
26145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 août 2019
314
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
Messages postés
9
Date d'inscription
jeudi 7 décembre 2017
Statut
Membre
Dernière intervention
25 avril 2018
-
1000 merci jordane45
encore merci
Résolu.
Commenter la réponse de jordane45