Cоздание формы динамически
Нужно чтобы динамически создаваемые строки находились в форме. Форма создается каждый раз при создании строки, а должна быть только одна. И находится за пределами таблицы (см. фото). Как это исправить?
<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>
|
Judgin,
что мешает проверить то, что форма уже создана и не создавать повторно? |
Цитата:
|
Judgin,
var my_form = document.querySelector('[name="myForm"]');
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);
};
|
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>
|
[quote=рони;537453]Judgin,
Все работает, благодарю! |
Judgin,
не копируйте сообщения целиком, без необходимости, есть цитирование. |
| Часовой пояс GMT +3, время: 15:43. |