"<form>"和"</form>在同一行中。在表单外部生成的其他元素

Question

我正在使用javascript创建一个表单，然后添加元素。
此代码运行按钮的 onclick 事件。
但是生成的代码包含单行中的<form>和</form>代码以及在此行之后生成的元素。
我已经为表单提供了内联样式边框。 窗体边框仅覆盖一行，控件在窗体外部生成。

如何将<form>和</form>之间的所有元素带入？ 下面是我代码的一部分。

var f_id = frm_main_id + "_set" + (set_no + 1);
var criterias_csv_id = frm_main_id + '_criteria_csv';
var criterias_csv = document.getElementById(criterias_csv_id).value
var criteria_array = criterias_csv.split("|");
var fldno = 0;
var i;
var fid = "activity" + act_no + "_time_" + (set_no + 1) + "time";        
var x = document.getElementById("id_" + act_no + "_fieldset")
var f = document.createElement("form");
f.setAttribute('method', "post");
f.setAttribute('id', f_id);
f.setAttribute('action', "submit_criteria.php");
f.style.borderStyle = "solid";
x.appendChild(f);
//var table = document.getElementById("id_" + act_no + "_table");
var new_table = document.createElement("TABLE");
new_table.setAttribute('class', "class_open");
new_table.setAttribute('form', f_id);
new_table.style.borderStyle = "solid";
x.appendChild(new_table);
var new_row = document.createElement("TR");
new_table.appendChild(new_row);
var th = document.createElement("th");
new_row.appendChild(th);
th.innerHTML = "Observed Time" + (set_no + 1);
var th = document.createElement("th");
new_row.appendChild(th);
var s = document.createElement("input");
s.setAttribute('type', "datetime-local");
s.setAttribute('id', fid);
s.setAttribute('form', f_id);
s.setAttribute('required', true);
th.appendChild(s);
for (i = 0; i < criteria_array.length; i += 2) {
fldno++;
fid = "activity" + act_no + "_time_" + (set_no + 1) + "_criteria_" + fldno;
var new_row = document.createElement("TR");
new_table.appendChild(new_row);
if (i == 0) {}
var field_type = "";
var fldname = criteria_array[i];
field_type = criteria_array[i + 1];
field_type = field_type.trim();
switch (field_type) {
case "Numeric":
field_type = "number";
break;
case "TEXT":
field_type = "text";
break;
}
var new_row = document.createElement("TR");
new_table.appendChild(new_row);
new_col = document.createElement("td");
new_row.appendChild(new_col);
new_col1 = document.createElement("td");
new_row.appendChild(new_col1);
new_label = document.createElement("label");
new_label.setAttribute("for", fid);
new_label.innerHTML = fldno + ")" + fldname;
new_col.appendChild(new_label);
switch (field_type) {
case "number":
case "text":
var s = document.createElement("input");
s.setAttribute('type', field_type);
s.setAttribute('id', fid);
s.setAttribute('required', true);
s.setAttribute('form', f_id);
new_col1.appendChild(s);
break;
case "YN":
var s = document.createElement("SELECT");
s.setAttribute('id', fid);
s.setAttribute('form', f_id);
var option = document.createElement("option");
option.text = "";
option.value = "";
s.add(option);
var option = document.createElement("option");
option.text = "No";
option.value = "N";
s.add(option);
var option = document.createElement("option");
option.text = "Yes";
option.value = "Y";
s.add(option);
new_col1.appendChild(s);
break;
default:
break;
}
}
new_row = document.createElement("TR");
new_table.appendChild(new_row);
new_col = document.createElement("td");
new_row.appendChild(new_col);
s = document.createElement("input"); //input element, Submit button
s.setAttribute('type', "submit");
s.setAttribute('value', "Save");
s.setAttribute('form', f_id);
s.setAttribute('onclick', "x()");
//"clk_save(', $act_no, ',', $edit, ')"> 
new_col.append(s);
new_col = document.createElement("td");
new_row.appendChild(new_col);
new_col.append(s);
}

我目前分别设置了每个元素的表单属性，它工作正常。但是表单周围的边框仅适用于第一行。 知道吗？？

Answer 1

感谢您的建议。 我已经发布了完整的代码。 我做了以下更正，一切都很好

x.appendChild(new_table(; 将 x. 替换为 f。