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

Votre réponse

2 réponses

Messages postés
23244
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 novembre 2018
- 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>

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