Meme nombre de colonnes sur un tableau Javascript

Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018 - Modifié le 12 janv. 2018 à 20:40
Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018 - 11 janv. 2018 à 11:49
Bonjour,

SVP, est ce que je peux avoir de l'aide par rapport a un petit soucis sur un tableau.
si vous exécuter ce petit script, il fonctionne mais plutôt de créer 3 colonnes il me créer 4.
Merci d'avance.

<html>

<head>
 <title>FORMULAIRE</title>
 <charset="UTF-8">
</head>
 
<body>

<fieldset>

<p>
<label><b>Année :</b>     
 <select  name="Year" id="Q1">
  <option  selected="selected"  style="text-align: center;"  value="">------Select Year------</option>
  <option > 2018 </option>          
  <option > 2019 </option>
  <option > 2020 </option>
  <option > 2021 </option>
  <option > 2022 </option>
  <option > 2023 </option>
  <option > 2024 </option>
  <option > 2025 </option>        
 </select>
</label>
<label>
         <b>Mois :</b>     
 <select  name="Month" id="Q2">
  <option  selected="selected"  style="text-align: center;"  value="">------Select Month------</option>
  <option > Janvier </option>          
  <option > Février </option>
  <option > Mars </option>
  <option > Avril </option>
  <option > Mai </option>
  <option > Juin </option>
  <option > Juillet </option>
  <option > Aôut </option>
  <option > Septembre </option>
  <option > Octobre </option>
  <option > Novembre </option>
  <option > Décembre </option>        
 </select>
</label>
 <label>
               <b>Semaine :</b>     
 <select  name="Week" id="Q3">
  <option  selected="selected"  style="text-align: center;"  value="">------Select Week------</option>
 <option > Week 01 <option>
 <option > Week 02 <option>
 <option > Week 03 <option>
 <option > Week 04 <option>
 <option > Week 05 <option>
 <option > Week 06 <option>
 <option > Week 07 <option>
 <option > Week 08 <option>
 <option > Week 09 <option>
 <option > Week 10 <option>
 <option > Week 11 <option>
 <option > Week 12 <option>
 <option > Week 13 <option>
 <option > Week 14 <option>
 <option > Week 15 <option>
 <option > Week 16 <option>
 <option > Week 17 <option>
 <option > Week 18 <option>
 <option > Week 19 <option>
 <option > Week 20 <option>
 <option > Week 21 <option>
 <option > Week 22 <option>
 <option > Week 23 <option>
 <option > Week 24 <option>
 <option > Week 25 <option>
 <option > Week 26 <option>
 <option > Week 27 <option>
 <option > Week 28 <option>
 <option > Week 29 <option>
 <option > Week 30 <option>
 <option > Week 31 <option>
 <option > Week 32 <option>
 <option > Week 33 <option>
 <option > Week 34 <option>
 <option > Week 35 <option>
 <option > Week 36 <option>
 <option > Week 37 <option>
 <option > Week 38 <option>
 <option > Week 39 <option>
 <option > Week 40 <option>
 <option > Week 41 <option>
 <option > Week 42 <option>
 <option > Week 43 <option>
 <option > Week 44 <option>
 <option > Week 45 <option>
 <option > Week 46 <option>
 <option > Week 47 <option>
 <option > Week 48 <option>
 <option > Week 49 <option>
 <option > Week 50 <option>
 <option > Week 51 <option>
 <option > Week 52 <option>
 <option > Week 53 <option>    
 </select>
 </label>
</p>
</fieldset>

</body>

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

<BR><BR>

<table  id="matable" class="table" style="width:100%" style="background-color: white;" border="1"  cellpadding="0"  cellspacing="0">

 <tr>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" height="28" align="center" valign=middle bgcolor="#FFFF99"><b><font color="#000000">Year</font></b></td>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align="center" valign=middle bgcolor="#FFFF99"><b><font color="#000000">Month</font></b></td>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align="center" valign=middle bgcolor="#FFFF99"><b><font color="#000000">Week</font></b></td>
 </tr>
 <tr>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" height="15" align="center" valign=middle bgcolor="#FFFF99" sdval="2018" sdnum="1033;"><b><font color="#000000">2018</font></b></td>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align="left" bgcolor="#FFFF99"><b><font color="#000000">Janvier</font></b></td>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align="left" bgcolor="#FFFF99"><b><font color="#000000">Week 1</font></b></td>
 </tr>
 <tr>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" height="15" align="center" valign=middle bgcolor="#FFFF99" sdval="2018" sdnum="1033;"><b><font color="#000000">2018</font></b></td>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align="left" bgcolor="#FFFF99"><b><font color="#000000">Janvier</font></b></td>
  <td style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000" align="left" bgcolor="#FFFF99"><b><font color="#000000">Week 1</font></b></td>
 </tr>

</table>

<BR><BR>


<script type="text/javascript">
 

function addRow(tableau){
    tableau = document.getElementById(tableau);
    var tds = 3;  
    var tr = document.createElement('tr'); 
   var td = document.createElement('td');
        tr.appendChild(td);
       
    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);
document.getElementsByName("Year")[0].value = "";
document.getElementsByName("Month")[0].value = "";
document.getElementsByName("Week")[0].value = "";

}

</script> 
 
</html>

1 réponse

Zico250814 Messages postés 9 Date d'inscription jeudi 7 décembre 2017 Statut Membre Dernière intervention 25 avril 2018
11 janv. 2018 à 11:49
Merci tous le monde mais je l'ai trouvé,

en effet, j'ai mis 2 fois (tr.appendChild(td);).

Merci a tous.
0
Rejoignez-nous