在form/div標籤中動態新增表格

Question

動態建立表出現在 div 標籤外部。

我正在建立一個響應式註冊表單。輸入欄位取得使用者給定的表格所需的行數，並建立具有固定列數的所需行數。

我創建了表格，但它沒有出現在我想要的位置。請大家給點建議。也可以幫助解決第一行中的標籤問題，即標題（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>

我希望表格出現在 div 標籤中（在那個空白區域中）。

我還嘗試為表格新增標籤標題。請也幫忙解決這個問題。

Answer 1

你做得很好；只是一些礦工的錯誤。為「新增詳細資料」按鈕新增一個屬性（type="button"）；預設情況下，表單中的按鈕類型是提交，新增屬性如下：

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

並在任意位置新增一個 div

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

還有這個

document.body.appendChild(tbl);

替換為

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

或

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