Ajouter dynamiquement une table dans la balise form/div

Question

Les tableaux créés dynamiquement apparaissent en dehors des balises div.

Je crée un formulaire d'inscription responsive. Le champ de saisie prend le nombre de lignes requis pour le tableau donné par l'utilisateur et crée le nombre de lignes requis avec un nombre fixe de colonnes.

J'ai créé le tableau mais il n'apparaît pas là où je le souhaite. S'il vous plaît, donnez-moi quelques conseils. Cela aide également à résoudre le problème de l'étiquette dans la première ligne, qui est le titre (th).

function createFamTable() {
        var rows = document.getElementById("family-rows").value;
        var tbl = document.createElement("table");
        tbl.id = "family-table1";
        var tblBody = document.createElement("tbody");

        for (let i = 0; i < rows; i++) {
          var row = document.createElement("tr");
          for (let j = 0; j < 5; j++) {
            var cell = document.createElement("td");
            switch(j) {
                case j=0:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Name";
                    cell.appendChild(cellText);
                    break;
                case j=1:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Relation";
                    cell.appendChild(cellText);
                    break;
                case j=2:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Profession";
                    cell.appendChild(cellText);
                    break;
                case j=3:
                    var cellText = document.createElement('input');
                    cellText.placeholder = "Enter Age";
                    cell.appendChild(cellText);
                    break;
                case j=4:
                    var cellText = document.createElement('select');
                    var arr = ["Select Yes / No","Yes","No"];
                    for (var k=0;k<=2;k++){
                        var opt = document.createElement('option');
                        opt.value = arr[k];
                        opt.text = arr[k];
                        cellText.appendChild(opt);
                    }
                    cell.appendChild(cellText);
                    break;
            }
            row.appendChild(cell);
          }
          tblBody.appendChild(row);
        }
        tbl.appendChild(tblBody);
        document.body.appendChild(tbl);
        cell.setAttribute("border", "2");
        addFirstRow();
}

<div class="form third">
                    <div class="details education">
                        <span class="title">Family Details</span>
                        <div class="fields">
                            <label>Number of Family Members<span style="color:red;font-size: smaller;">*</span></label>
                            <input type="number" id="family-rows" placeholder="Example: 5" required>
                        </div>
                        <button class="createFamilyTable" onclick="createFamTable()">Add Details</button>
                        <div class="buttons">
                            <div class="backBtn1">
                                <i class="uil uil-navigator"></i>
                                <span class="btnText">Back</span>
                            </div>
                            <button class="nextBtn2">
                                <span class="btnText">Next</span>
                                <i class="uil uil-navigator"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </form>

Je veux que le tableau apparaisse à l'intérieur de la balise div (dans cet espace vide).

J'ai également essayé d'ajouter un titre d'étiquette au tableau. Veuillez également aider à résoudre ce problème.

Answer 1

Vous avez fait un excellent travail ; c'est juste une erreur de mineur. Ajoutez un attribut (type="button") pour le bouton "Ajouter des détails" ; par défaut, le type de bouton dans le formulaire est Soumettre, ajoutez l'attribut comme suit :

<button type="button" class="createFamilyTable" onclick="createFamTable()"> Add Details</button>

et ajoutez un div n'importe où

<div id="form-table"></div>

Et ça

document.body.appendChild(tbl);

remplacé par

document.getElementById('form-table').appendChild(tbl);

ou

document.getElementById('form-table').innerHTML = tbl;