动态表单未发布新元素

Question

我正在尝试调整表内部的静态现有表单，使其在某些情况下取决于“选择”是动态的。

我所做的是在现有表id->“ peticionobras”上创建新的TR TD，并使用innerHtml将它们填充为我需要的新输入文本。 普通javascript中的所有内容如下：

//if select is...

if (value == "A" || value == "B" || value == "C"){

            var tableObras = document.getElementById("peticionobras");
            if (tableObras.rows[5].cells[0].innerHTML.includes("Codigo_Emp_Actuacion")){
                var row = tableObras.insertRow(5);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "<dd><b>C_Emp_con_necesidad</b>:";
                cell2.innerHTML = "<input type='text' id='C_Emp_con_necesidad' name='C_Emp_con_necesidad'>&nbsp;&nbsp;<br><br><bdi id='C_Emp_con_necesidad_tag'>Emplazamiento con problemas potencialmente solucionables con la implantaci\u00F3n</bdi><br><br>";
                document.getElementById("C_Emp_con_necesidad").setAttribute("required", true);

                var row = tableObras.insertRow(6);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "<dd><b>D_Emp_con_necesidad</b>:";
                cell2.innerHTML = "<input type='text' id='D_Emp_con_necesidad' name='D_Emp_con_necesidad'>&nbsp;&nbsp;<bdi id='D_Emp_con_necesidad_tag'></bdi>";
                document.getElementById("D_Emp_con_necesidad").setAttribute("required", true);

                var row = tableObras.insertRow(9);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = "<dd><b>Direccion_coordenadas</b>:";
                cell1.id = "testtdtd";
                cell2.innerHTML = "<input type='text' id='Direccion_coordenadas' name='Direccion_coordenadas'>&nbsp;&nbsp;<bdi id='Direccion_coordenadas_tag'></bdi>";
                document.getElementById("Direccion_coordenadas").setAttribute("required", true);

            }
        }

就方面而言，结果很好，它把我需要的东西放在应该的地方。 但是这种行为是不正确的。 新的必填字段不会按要求显示，并且一旦提交表单，便不会提交新的输入

（注意：未定义的索引：D_Emp_con_necesidad in ...）。

主页代码示意性如下：

<table id="peticionobras">
    <tbody>
    <form action="./test.php" method="POST">
    <tr><td>1</td><td>2</td></tr>
    <tr><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>2</td></tr>
    <tr><td>4</td><td>2</td></tr>
    <tr><td>6</td><td>2</td></tr>
    <tr><td>7</td><td>2</td></tr>
    <tr><td>8</td><td>2</td></tr>
    <tr><td>9</td><td>2</td></tr>
    <tr><td>10</td><td>2</td></tr>
    <tr><td><button type="submit" value="submit">Submit</button></td><td>2</td></tr>
    </form>
    </tbody>
</table>

我认为我实现它的方式过于直率。 在如何在现有的形式添加新的输入中的任何建议id='obras'在表内id='peticionobras'中的位置5,6和9或任何线索跟随，这将是高度appreciatted。

感谢和问候

Answer 1

*编辑[如@QUENTIN在以下问题中所解释： 表格内的表格 -表格不得作为表格，tbody或tr的子元素-

<form action="./test.php" method="POST">
<table id="peticionobras">
    <tbody>
    <tr><td>1</td><td>2</td></tr>
    <tr><td>2</td><td>2</td></tr>
    <tr><td>3</td><td>2</td></tr>
    <tr><td>4</td><td>2</td></tr>
    <tr><td>6</td><td>2</td></tr>
    <tr><td>7</td><td>2</td></tr>
    <tr><td>8</td><td>2</td></tr>
    <tr><td>9</td><td>2</td></tr>
    <tr><td>10</td><td>2</td></tr>
    </tbody>
</table>

<button type="submit" value="submit">
    Submit
</button>
</form>
<script>
var value  = 'A';
if (value == "A" || value == "B" || value == "C"){
        var tableObras = document.getElementById("peticionobras");
        if (tableObras.rows[5].cells[0].innerHTML.includes("Codigo_Emp_Actuacion")){
            var row = tableObras.insertRow(5);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<dd><b>C_Emp_con_necesidad</b>:";
            cell2.innerHTML = "<input type='text' id='C_Emp_con_necesidad' name='C_Emp_con_necesidad'>&nbsp;&nbsp;<br><br><bdi id='C_Emp_con_necesidad_tag'>Emplazamiento con problemas potencialmente solucionables con la implantaci\u00F3n</bdi><br><br>";
            document.getElementById("C_Emp_con_necesidad").setAttribute("required", true);

            var row = tableObras.insertRow(6);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<dd><b>D_Emp_con_necesidad</b>:";
            cell2.innerHTML = "<input type='text' id='D_Emp_con_necesidad' name='D_Emp_con_necesidad'>&nbsp;&nbsp;<bdi id='D_Emp_con_necesidad_tag'></bdi>";
            document.getElementById("D_Emp_con_necesidad").setAttribute("required", true);

            var row = tableObras.insertRow(9);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<dd><b>Direccion_coordenadas</b>:";
            cell1.id = "testtdtd";
            cell2.innerHTML = "<input type='text' id='Direccion_coordenadas' name='Direccion_coordenadas'>&nbsp;&nbsp;<bdi id='Direccion_coordenadas_tag'></bdi>";
            document.getElementById("Direccion_coordenadas").setAttribute("required", true);

        }
    }
</script>