Question

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

我要做的是在现有表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'内的第{6}和第9位上以id='peticionobras'形式添加新输入的建议，或任何后续线索，都将受到高度赞赏。

谢谢问候

Answer 1

*编辑[如@QUENTIN在以下问题中解释： Form inside a table -不允许将表单作为表，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>

动态表单未发布新元素

1 个答案: