HTML: Ajouter des éléments dynamiquement à l'aide de JS

De travail avec HTML5, j'ai créé un tableau simple qui consiste en une série de paire de champs (journal d'Activité, temps). J'ai cherché sur le web comment créer dynamiquement des champs à l'aide de Javascript, mais j'ai trouvé comment créer un champ à la fois (à l'aide d'getElementById). Le truc c'est que j'aimerais créer une série de balises. Sens, lorsque l'utilisateur clique sur "ajouter un champ", j'aimerais que JS génère une autre rangée sur la table, avec une paire de champs, au lieu de coder en dur le tableau complet (l'extrait de code ci-dessous n'a que deux lignes, mais je serais probablement besoin de 10-15 lignes).

L'extrait de code pour le tableau de la figure ci-dessous. En utilisant le CSS de la page semble que c'est sur la capture d'écran.
capture d'écran:

J'apprécierais toute aide.
Merci à l'avance.

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="utf-8">
   <title>Activity Log</title>
   <link href="styles.css" rel="stylesheet">
   <script type="text/javascript" language="javascript" src="script.js"></script>

</head>

<body>
<div class="container">
    <div class="row">
        <div class="leftcol">
            <form name='mainForm' id='mainForm' method="get" action="http://www.randyconnolly.com/tests/process.php">
  <fieldset>
     <legend>Input Activity Logs</legend>
     <table id=tracklist>
      <tr>
        <th colspan="3">Track List: </th>
      </tr>
      <tr>
        <td>1</td>
        <td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
        <td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
      </tr>
      <tr>
        <td>2</td>
        <td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
        <td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
      </tr>
     </table>
     <input type="submit" />
  </fieldset>
</form>
        </div>

    </div>
</div>
</body>
</html>

InformationsquelleAutor Emilio Zaidman | 2016-06-17
  1. 1

    Vous pouvez utiliser le .innerHTML += méthode filaire jusqu'à "Ajouter une Activité" bouton. Chaque fois que vous cliquez sur le bouton une nouvelle ligne de la table est ajoutée avec les bons numéros d'index. Ici est un travail entièrement exemple - pour l'amour de la simplicité et de n'avoir qu'un seul fichier, je ai inclus le code javascript directement dans le code HTML:

    <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Activity Log</title>
<script>
//Wait until the window finishes loaded before executing any script
window.onload = function() {
//Initialize the activityNumber
var activityNumber = 3;
//Select the add_activity button
var addButton = document.getElementById("add_activity");
//Select the table element
var tracklistTable = document.getElementById("tracklist");
//Attach handler to the button click event
addButton.onclick = function() {
//Add a new row to the table using the correct activityNumber
tracklistTable.innerHTML += '<tr><td>' + activityNumber + '</td><td><label>Activity Log: </label><br/><input type="text" name="actlog' + activityNumber + '" class="required"></td><td><label>Time: </label><br/><input type="time" name="time' + activityNumber + '" class="required"></td></tr>';
//Increment the activityNumber
activityNumber += 1;
}
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="leftcol">
<form name='mainForm' id='mainForm' method="get" action="#">
<fieldset>
<legend>Input Activity Logs</legend>
<table id="tracklist">
<tr>
<th colspan="3">Track List: </th>
</tr>
<tr>
<td>1</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog1" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time1" class="required"></td>
</tr>
<tr>
<td>2</td>
<td><label>Activity Log: </label><br/><input type="text" name="actlog2" class="required"></td>
<td><label>Time: </label><br/><input type="time" name="time2" class="required"></td>
</tr>
</table>
<input type="submit" />
</fieldset>
</form>
<button id="add_activity">Add Activity</button>
</div>
</div>
</div>
</body>
</html>
    InformationsquelleAutor samcervantes
  2. 2

    Ajouter un bouton comme <input type="button" onclick="cloneRow()" value="Clone Row" /> dans votre code html et ajouter un id à la ligne à copier (exm. <tr id="rowToClone">) puis ajouter la fonction javascript suivante dans votre code

     function cloneRow() {
var row = document.getElementById("rowToClone"); //find row to copy
var table = document.getElementById("tracklist"); //find table to append to
var clone = row.cloneNode(true); //copy children too
clone.id = "newID"; //change id or other attributes/contents
table.appendChild(clone); //add new row to end of table
}
    InformationsquelleAutor Hector Barbossa
  3. 1

    Certains moyens populaires pour ajouter un élément:

    1. Utilisation document.createElement pour créer un élément dont vous avez besoin, et utiliser document.appendChild ou document.insertBefore pour l'ajouter à html.
    2. Utilisation element.insertAdjacentHTML pour ajouter un élément.
    3. L'utilisation des bibliothèques comme jQuery et de Réagir.
    InformationsquelleAutor L_K
  4. 0

    Ce que vous avez besoin est document.createElemrnt(tagNameString);
    Cette fonction fait exactement ce que vous pensez. Ensuite, vous pouvez créer plus d'éléments et de faire d'eux des enfants de l'autre.

    InformationsquelleAutor Richard Barker