Как я могу создать таблицу форм HTML, чтобы при отправке я создавал другой HTML-код, используя данные, вставленные в таблицу?
Пример: у меня есть форма со следующими столбцами: Имя, Тип и Обязательный Я хочувводить идентификаторы, текст и достоверные данные в форму и при ее отправке. он генерирует HTML-форму с меткой с именем (ID), требуется ввод типа (текст).
Я написал код для добавления динамических строк в форму ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamic Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./script.js" type="text/javascript"></script>
</head>
<body>
<center>
<form action="">
<table border="1">
<thead>
<tr>
<th>Label</th>
<th>Type</th>
<th>Required</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" placeholder="Write your label name ..."></td>
<td>
<select>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="select">Select Menu</option>
</select>
</td>
<td>
<select>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="button" value="Add new item" id="addNewRow"></td>
</tr>
</tfoot>
</table>
</form>
</center>
</body>
</html>
script.js
$(document).ready(function () {
$("#addNewRow").click(function () {
console.log("in function");
var addControls = `<tr>
<td><input type="text" placeholder="Write your label name ..." name="label"></td>
<td>
<select>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="select">Select Menu</option>
</select>
</td>
<td>
<select>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</td>
</tr>`
$("table tbody").append(addControls);
});
});