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

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

2 réponses

Répondre au sujet
jordane45 19222 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 13 décembre 2017 Dernière intervention - 7 déc. 2017 à 12:46
0
Utile
1
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 2 Messages postés jeudi 7 décembre 2017Date d'inscription 7 décembre 2017 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.