Insérer une nouvelle ligne de tags d'entrée en utilisant JavaScript

Je voudrais ajouter une nouvelle ligne de 5 balises d'entrée à l'élément <td>, qui est un enfant de <tr class="unit">, et qui est un petit-fils de <table id="myTable"> élément.Insérer une nouvelle ligne de tags d'entrée en utilisant JavaScript

Dans mon code Javascript, j'étais capable de consigner par console les 5 balises d'entrée, mais je n'ai pas pu les ajouter à l'élément <td> et au reste des éléments parents.

Mon code est-il sur la bonne voie pour résoudre ce problème?

Voici un lien vers la ce que je fais http://codepen.io/johnnyginbound/pen/xZxZNo?editors=101

function addRow(){ 
 
    var parentTable = document.getElementById('myTable'); 
 
    var tableRow = document.getElementsByTagName('tr')[0].children; 
 
    var unitTables = document.getElementsByClassName('unit-table')[0]; 
 
    var newInputType = document.createElement('input'); 
 
    newInputType.setAttribute('type', 'text'); 
 
    
 
    for(var i=0; i<unitTables.children.length; i++){ 
 
    var appendedInput = unitTables.children[i].appendChild(newInputType) 
 
    parentTable.appendChild(appendedInput); 
 
    } 
 
} 
 

 
document.getElementById('add_btn').onclick=addRow;

<form> 
 

 
    <div class="panel panel-default"> 
 
    <!-- Default panel contents --> 
 
    <div class="panel-heading">Panel heading</div> 
 
    <div class="panel-body"> 
 
     <p> ASME Email: </p> 
 
     <input type="text" name="email"> 
 
     <br /> 
 
     <br /> 
 

 
    </div> 
 

 
    <!-- Table --> 
 
    <table id="myTable" class="table"> 
 
     <tr> 
 
     <th> Technology </th> 
 
     <th> Markets </th> 
 
     <th> Enduring/Emerging </th> 
 
     <th> ASME Relevency </th> 
 
     <th> Comments </th> 
 
     </tr> 
 

 
     <tr class="unit-table"> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     </tr> 
 
     <tr class="unit-table"> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     </tr> 
 
     <tr class="unit-table"> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <button id="add_btn">Add new row</button> 
 
    <input type="submit" name="submit" value="Submit"> 
 
</form>

Source

2015-12-04 Johnny G.

comme celui-ci

function addRow(){ 


      var table = document.getElementById("myTable"); 
      var rows = document.getElementById("myTable").rows.length; 
      // add row 
       var row = table.insertRow(rows); 

      // add input in cell 
      for(var i = 0; i < 5; i++){ 
       var cell1 = row.insertCell(i); 
       var inputItem = document.createElement('input'); 
       cell1.appendChild(inputItem); 
      } 

      }

Source

2015-12-04 15:24:30

merci pour votre réponse- est-il une raison pour laquelle quand je clique pour exécuter la fonction, il ajoute momentanément la nouvelle ligne d'entrées puis disparaît? –

Oui, dans ma réponse est la raison (formulaire de rafraîchissement) – caballerog

Ajouter un paramètre type = "bouton" pour le contrôle de bouton, caballerog - votre code de yeefer créer de nombreuses entrées comme beaucoup de lignes, dans votre "for" doit par nombre d'entrées (5) pas de nombre de lignes dans le tableau. –

Et votre javascript et html devrait être aussi suivre

function addRow(){ 
 
     var table = document.getElementById("myTable"); 
 
     var rows = document.getElementById("myTable").rows.length; 
 

 

 

 

 
     var table = document.getElementById("myTable"); 
 
     var rows = document.getElementById("myTable").rows.length; 
 
     // add row 
 
      var row = table.insertRow(rows); 
 

 
     // add input in cell 
 
     for(var i = 0; i < 5; i++){ 
 
      var cell1 = row.insertCell(i); 
 
      var inputItem = document.createElement('input'); 
 
      cell1.appendChild(inputItem); 
 
     } 
 

 
     } 
 

 

 

 
document.getElementById('add_btn').onclick=addRow;

<form> 
 

 
    <div class="panel panel-default"> 
 
    <!-- Default panel contents --> 
 
    <div class="panel-heading">Panel heading</div> 
 
    <div class="panel-body"> 
 
     <p> ASME Email: </p> 
 
     <input type="text" name="email"> 
 
     <br /> 
 
     <br /> 
 

 
    </div> 
 

 
    <!-- Table --> 
 
    <table id="myTable" class="table"> 
 
     <tr> 
 
     <th> Technology </th> 
 
     <th> Markets </th> 
 
     <th> Enduring/Emerging </th> 
 
     <th> ASME Relevency </th> 
 
     <th> Comments </th> 
 
     </tr> 
 

 
     <tr class="unit-table"> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     </tr> 
 
     <tr class="unit-table"> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     </tr> 
 
     <tr class="unit-table"> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     <td> 
 
      <input type="text"> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 

 
    <input type="submit" name="submit" value="Submit"> 
 
</form> 
 
    <button id="add_btn">Add new row</button>

Source

2015-12-04 15:28:11 noisybuddha

Votre problème est la balise de formulaire qui rafraîchissent votre site Web dans chaque événement de touche. De plus, votre code JavaScript a plusieurs problèmes.

Donc, votre code devrait être

<div class="panel panel-default"> 
    <!-- Default panel contents --> 
    <div class="panel-heading">Panel heading</div> 
    <div class="panel-body"> 
     <p> ASME Email: </p> 
     <input type="text" name="email"> 
     <br /> 
     <br /> 

    </div> 

    <!-- Table --> 
    <table id="myTable" class="table"> 
     <tr> 
     <th> Technology </th> 
     <th> Markets </th> 
     <th> Enduring/Emerging </th> 
     <th> ASME Relevency </th> 
     <th> Comments </th> 
     </tr> 

     <tr class="unit-table"> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     </tr> 
     <tr class="unit-table"> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     </tr> 
     <tr class="unit-table"> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     <td> 
      <input type="text"> 
     </td> 
     </tr> 
    </table> 
    </div>

JavaScript

function addRow(){ 
    var parentTable = document.getElementById('myTable'); 
    var myTd,myInput; 
    var myTr = document.createElement('tr'); 
    myTr.setAttribute('class','unit-table'); 
    for (var i=0; i<5;i++){ 
    myTd = document.createElement('td'); 
    myInput = document.createElement('input'); 
    myInput.setAttribute('type','text'); 
    myTd.appendChild(myInput); 
    myTr.appendChild(myTd); 
    } 
    parentTable.appendChild(myTr); 
} 
document.getElementById('add_btn').onclick=addRow;

Source

2015-12-04 15:31:56 caballerog

Cela a pris beaucoup de travail. Voici ma réponse :)

https://jsfiddle.net/www139/1jwf02p7/

function addRow() { 
 
    var table = document.getElementById('myTable'); 
 
    var columnLength = table.getElementsByTagName('tr')[0].children.length; 
 
    var units = document.getElementsByClassName('unit-table'); 
 
    var tr = document.createElement('tr'); 
 
    tr.className = 'unit-table'; 
 
    for (var i = 0; i < columnLength; i++) { 
 
    var td = document.createElement('td'); 
 
    var text = document.createElement('input'); 
 
    text.type = 'text'; 
 
    td.appendChild(text); 
 
    tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
} 
 

 
document.getElementById('add_btn').onclick = addRow;

<!--<form>--> 
 

 
<div class="panel panel-default"> 
 
    <!-- Default panel contents --> 
 
    <div class="panel-heading">Panel heading</div> 
 
    <div class="panel-body"> 
 
    <p>ASME Email:</p> 
 
    <input type="text" name="email"> 
 
    <br /> 
 
    <br /> 
 

 
    </div> 
 

 
    <!-- Table --> 
 
    <table id="myTable" class="table"> 
 
    <tr> 
 
     <th>Technology</th> 
 
     <th>Markets</th> 
 
     <th>Enduring/Emerging</th> 
 
     <th>ASME Relevency</th> 
 
     <th>Comments</th> 
 
    </tr> 
 

 
    <tr class="unit-table"> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr class="unit-table"> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    <tr class="unit-table"> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
     <td> 
 
     <input type="text"> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
<button id="add_btn">Add new row</button> 
 
<input type="submit" name="submit" value="Submit"> 
 
<!--</form>-->

Source

2015-12-04 15:34:39 www139

merci pour votre réponse - j'allais dans cette direction aussi bien. Votre réponse a eu beaucoup de sens. :) –

@ utilisateur3882106 Merci :) – www139

Insérer une nouvelle ligne de tags d'entrée en utilisant JavaScript

Répondre

Questions connexes