Fügen Sie dynamisch eine Tabelle im form/div-Tag hinzu
Dynamisch erstellte Tabellen werden außerhalb von div-Tags angezeigt.
Ich erstelle ein responsives Registrierungsformular. Das Eingabefeld nimmt die vom Benutzer angegebene erforderliche Anzahl von Zeilen für die Tabelle und erstellt die erforderliche Anzahl von Zeilen mit einer festen Anzahl von Spalten.
Ich habe die Tabelle erstellt, aber sie erscheint nicht an der gewünschten Stelle. Bitte geben Sie mir einen Rat. Hilft auch bei der Beschriftungsfrage in der ersten Zeile, dem Titel (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>
Ich möchte, dass die Tabelle innerhalb des div-Tags (in diesem leeren Bereich) erscheint.
Ich habe auch versucht, der Tabelle einen Etikettentitel hinzuzufügen. Bitte helfen Sie auch, dieses Problem zu lösen.
