Judgin,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<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">
<thead class="table">
<tr 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>
</tr>
</thead>
<tbody></tbody>
</TABLE>
<script>
function addRow(tableID) {
var my_form = document.querySelector('[name="myForm"]');
var table = document.getElementById(tableID);
if (!my_form) {
my_form = document.createElement('FORM');
my_form.name = 'myForm';
my_form.method = 'POST';
my_form.action = 'insert_data_to_db.php';
document.body.appendChild(my_form);
table.replaceWith(my_form);
my_form.append(table)
}
var row = table.tBodies[0].insertRow(-1);
for (let i = 0; i < 13; i++) {
var cell0 = row.insertCell(i);
var element0 = document.createElement("input");
element0.type = "text" + i;
element0.name = "name" + i;
element0.id = "input";
cell0.appendChild(element0);
}
}
function deleteRow(tableID) {
document.getElementById("dataTable").tBodies[0].deleteRow(-1);
}
</script>
</body>
</html>