Как наследовать datalist в in input?


у меня есть форма высоких, которую я хочу добавить больше строк, чтобы добавить несколько высоких, но во время клонирования моих текстовых полей новые не создаются.

<center><input type="button" class="form-control" onClick="addRow('tablaArticulos')" value="Agregar otro artículo" style="height: 40px; font-size:20px" /> <INPUT type="button" value="Borrar fila(s)" class="form-control" style="height: 40px; font-size:20px" onClick="deleteRow('tablaArticulos')" /><br/><br/></center>
    <table id="tablaArticulos" border="0" summary="Agregar" align=center width=950px cellpadding=5px>
        <tr style="background-color: #F2F2F2;font-style: bold;">
            <td><center><em>Selección</em></center></td>
            <td><center><em>Nombre</em></center></td>
            <td><center><em>Nombre del proveedor</em></center></td>
            <td><center><em>Descripci&oacuten</em></center></td>
            <td><center><em>Num. de parte</em></center></td>
            <td><center><em>Cantidad</em></center></td>
            <td><center><em>Categoria</em></center></td>
            <td><center><em>Ubicaci&oacuten</em></center></td>
            <td><center><em>Responsable</em></center></td>
        </tr>
        <tr>
            <TD><center><em><INPUT onclick="toggle(this)" type="checkboox" name="chkbox[]" title="Seleccionar todos"/></TD></em></center></TD>
            <td><center><input type="text" class="form-control" id="nombre[1]" name="nombre[1]" size="25" maxlength="150" required/></center></td>
            <td  style="text-align: center;">
               <?php
                  echo'<input type="text" name="marca[1]" class="form-control" list="empresas_todas">';
                  echo "<datalist id='empresas_todas'>";
                  include ('conexion.php');
                  $result = mysql_query ("SELECT * FROM proveedores order by nombre_proveedor asc"); //consulta de la tabla                 
                  while ($row = mysql_fetch_array ($result)){
                     echo "<option value='".$row['nombre_proveedor']."'>".$row['nombre_proveedor']."</option>";
                  }
                    echo "</datalist></input>";                  
               ?>
           </td>
           <td><center><input class="form-control" id="descripcion[1]" type="text" name="descripcion[1]" size="25" maxlength="570" required/></center></td>
           <td><center><input type="text" class="form-control" id="no_parte[1]" name="no_parte[1]" size="20" maxlength="170" style="text-transform:uppercase;" onkeyup="javascript:this.value=this.value.toUpperCase();" /></center></td>
                    <td>
                        <input id="cantidad[1]" NAME="cantidad[1]" class="form-control" type="number" pattern="\d*"/ min="1" value="1">
                    </td>
                    <td>
                        <SELECT id="categoria[1]" name="categoria[1]" class="form-control" style="width: 117px">
                            <?php
                                include ('conexion.php');
                                $result = mysql_query ("SELECT * FROM categorias order by categoria asc"); //consulta de la tabla                  
                                while ($row = mysql_fetch_array ($result)){
                                    echo "<option value='".$row['categoria']."'>".$row['categoria']."</option>";
                                }
                            ?>
                        </SELECT>
                    </td>
                    <td><center><input class="form-control" type="text" id="ubicacion[1]" name="ubicacion[1]" size="25" maxlength="150" required/></center></td></td>
                    <td><center><SELECT class="form-control" id="responsable[1]" NAME="responsable[1]" style="width: 117px">
                        <? 
                            include ('conexion.php');
                            $result = mysql_query ("SELECT * FROM responsables order by nombre asc"); //consulta de la tabla                    
                            while ($row = mysql_fetch_array ($result)){
                                echo "<option value='".$row['nombre']."'>".$row['nombre']."</option>";
                            }
                        ?> 
                    </SELECT></center></td>
                </tr>
            </table><br/>
            <center> <input type="submit" class="form-control" style="height: 40px; font-size:20px" value="Guardar"/> </center>

<SCRIPT language="javascript">
    function addRow(tableID) {
            var table = document.getElementById(tableID);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.style="text-align: center";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            var element2 = document.getElementById("nombre[1]").cloneNode(true);
            element2.class="form-control";
            element2.type = "text";
            element2.name = "nombre["+rowCount+"]";
            element2.style="form-control";
            cell2.style="text-align: center";
            cell2.appendChild(element2);

            var cell3=row.insertCell(2);
            var element3 = document.createElement("INPUT");
            element3.list="empresas_todas";
            document.body.appendChild(element3);
            cell3.appendChild(element3);
            var cell4=row.insertCell(3);
            var element4=document.getElementById("descripcion[1]").cloneNode(true);
            element4.type="text";
            element4.name="descripcion["+rowCount+"]";
            cell4.appendChild(element4);

            var cell5=row.insertCell(4);
            var element5=document.getElementById("no_parte[1]").cloneNode(true);
            element5.type="text";
            element5.name="no_parte["+rowCount+"]";
            cell5.appendChild(element5);

            var cell6=row.insertCell(5);
            var element6 = document.getElementById("cantidad[1]").cloneNode(true);
            element6.type="SELECT";
            element6.name="cantidad["+rowCount+"]";
            cell6.style="text-align: center";
            cell6.appendChild(element6);

            var cell7=row.insertCell(6);
            var element7=document.getElementById("categoria[1]").cloneNode(true);
            element7.type="SELECT";
            element7.name="cantidad["+rowCount+"]";
            cell7.appendChild(element7);

            var cell8=row.insertCell(7);
            var element8=document.getElementById("ubicacion[1]").cloneNode(true);
            element8.type="text";
            element8.name="ubicacion["+rowCount+"]";
            cell8.appendChild(element8);

            var cell9=row.insertCell(8);
            var element9=document.getElementById("responsable[1]").cloneNode(true);
            element9.type="SELECT";
            element9.name="responsable["+rowCount+"]";
            cell9.appendChild(element9);

        }
</SCRIPT>

мне пришло в голову создать элементы снова, но они также не отображались в новой строке: s

Спасибо!

Author: kenethluna, 2016-07-18

1 answers

Проблема в том, что вы назначаете атрибут list с точечной нотацией (t3.list), и вы должны сделать это с помощью setAttribute():

t3.setAttribute("list", "empresas_todas");

Как только это будет исправлено, dropdown уже правильно заполнен (вы можете увидеть это в этом JSFiddle).

 1
Author: Alvaro Montoro, 2016-07-19 16:43:19