Нужно чтобы динамически создаваемые строки находились в форме. Форма создается каждый раз при создании строки, а должна быть только одна. И находится за пределами таблицы (см. фото). Как это исправить?
<SCRIPT language="javascript">
function addRow(tableID) {
document.body.appendChild(my_form);
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
my_form=document.createElement('FORM');
my_form.name='myForm';
my_form.method='POST';
my_form.action='insert_data_to_db.php';
for(let i=0; i<13; i++){
var cell0 = row.insertCell(0);
var element0 = document.createElement("input");
element0.type = "text"+i;
element0.name = "name"+i;
element0.id = "input";
cell0.appendChild(element0);
// var element1 = document.createElement("form");
// element1.setAttribute("method","post");
// element1.setAttribute ("action", "insert_data_to_db.php");
// appendChild(element1);
}
}
function deleteRow(tableID) {
document.getElementById("dataTable").deleteRow(1);
}
</SCRIPT>
<HTML>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br/>
<TABLE id="dataTable" width="1300" border="1">
<DIV class = "table">
<SPAN class = "titles">
<TH>Weld No.</TH>
<TH>Drawing No.</TH>
<TH>Thickness</TH>
<TH>Extent %</TH>
<TH>Accept. level</TH>
<TH>Weld kat</TH>
<TH>Max dB</TH>
<TH>Depth mm</TH>
<TH>Length mm</TH>
<TH>Angle (o)</TH>
<TH>Type of defect</TH>
<TH>Accepted/Not accepted</TH>
<TH>Date</TH>
</SPAN>
</DIV>
</TABLE>
</BODY>
</HTML>