entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

hola a todos, tengo esta tabla

<table class="table table-striped table-bordered table-hover table-heading no-border-bottom" id="field_grid10">
                            <thead>
                                <tr>
                                    <th>NODE TYPE</th>
                                    <th>NODE NAME</th>
                                    <th colspan="2">IP ADDRES</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="text" value=""  name="node1[]"  id="node1" placeholder="Node Type" class="form-control90" /></td>

                                    <td >
                                        <input type="text" value=""  name="node2[]" id="node2" placeholder="Node Name" class="form-control91" /><br>

                                    </td>

                                    <td><input type="text" value=""  name="node3[]" id="node3" placeholder="IP Address" class="form-control92" /></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                        <button id="add_field10" class="btn btn-default" onclick="funcionx()">Add Node Name <i class="fa fa-plus"></i></button>
                        <button id="add_field11" class="btn btn-default">Add Node Type <i class="fa fa-plus"></i></button>
                        **<script>
                        function funcionx() {
                            var valor = document.getElementsByClassName( 'form-control90' )[0].value;
                            document.getElementById("node1a").value= valor;
                            alert(valor);

                        }
                        </script>**
                        <script type="text/template10" id="template10">
                                  <tr>
                                    <td>
                                        <input type="text" class="form-control90" id="node1a"  name="node2[]" placeholder="Node Name" />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control91" value="" id="node2b"  name="node2[]" placeholder="Node Name" />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control92" value="" id="node3b" name="node3[]" placeholder="IP Address" />
                                    </td>

                                    <td>
                                        <a href="#" class="btn-remove10"><li class="fa fa-trash-o"> </li></a>
                                    </td>
                                </tr>

                        </script>
                        <script type="text/template11" id="template11">
                                  <tr>
                                    <td>
                                        <input type="text" class="form-control90" value="" id="node1a2"  name="node1[]" placeholder="Node Type" />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control91" value="" id="node2[]"  name="node2[]" placeholder="Node Name" />
                                    </td>
                                    <td>
                                        <input type="text" class="form-control92" value="" id="node3[]" name="node3[]" placeholder="IP Address" />

                                    </td>

                                    <td>
                                        <a href="#" class="btn-remove11"><li class="fa fa-trash-o"> </li></a>
                                    </td>
                                </tr>

                        </script>
                        <br><br>

genero los campos dinámicos con estos scripts


<script type="text/javascript">
function addField10() {
            $($('#template10').html()).appendTo('#field_grid10 tbody');
        }

        function removeField(e) {
            if($('input[type=text]').parents('tbody').find('tr').length <= 2) {
                return false;
            }
            var row = $(e).closest('tr').remove();
        }

        $(function() {
            $('#field_grid10').on('click', '.btn-remove10', function(e) {
                removeField(e.target);
                return e.preventDefault();
            });

            $('#add_field10').click(function(e) {
                addField10();
                return e.preventDefault();
            });

            $('#field_grid10').on('click', '.btn-up', function(e) {
                var current = $(this).parents('tr');

                if(current.prevAll().length == 1) {
                    return e.preventDefault();
                }
                current.prev().before(current);
                return e.preventDefault();
            });

            $('#field_grid10').on('click', '.btn-down', function(e) {
                var current = $(this).parents('tr');
                current.next().after(current);
                return e.preventDefault();
            });
        });
</script>

<script type="text/javascript">
function addField11() {
            $($('#template11').html()).appendTo('#field_grid10 tbody');
        }

        function removeField(e) {
            if($('input[type=text]').parents('tbody').find('tr').length <= 2) {
                return false;
            }
            var row = $(e).closest('tr').remove();
        }

        $(function() {
            $('#field_grid10').on('click', '.btn-remove11', function(e) {
                removeField(e.target);
                return e.preventDefault();
            });

            $('#add_field11').click(function(e) {
                addField11();
                return e.preventDefault();
            });
        });
</script>

necesito que si el usuario pone ADD Node Name se duplique el primer valor, lo estaba intentando con la parte del código que pongo en negrita y lo hace en el segundo valor si le pone el tercero ya no lo duplica :( ayuda por favor

2 Respuestas

1voto

white Puntos75840

Hola @rach, intenta obtener el primer elemento del contenedor, en tu pregunta no esta que campos seran de los que se obtenga el valor para los nuevos generados.

en tu función addField11 o addField10:

function addField10 () {
    var tmpl, tmplObject, last, lastInput;

    tmpl = $('#template10').html();
    tmplObject = $(tmpl);
    last = $('#field_grid10 > tbody').find('tr').last();

    if (last.length) {
        lastInput = last.find('.form-control90');
        tmplObject.find('.form-control90').val(lastInput.val());
    }

    $('#field_grid10 > tbody').append(tmplObject);
}

lo que hacemos es comprobar si existe un <tr> en #field_grid10 > tbody si es asi entonces obtenemos el ultimo <tr> agregado y modificamos el contenido del template en este caso el elemento .form-control90 del template en tmplObject.

ejemplo: http://jsfiddle.net/uct8yaax/


por otra parte noté que estas usando un id cada input dinámico, un identificador es único para cada elemento, por lo que no veo necesario que agreges el atributo id con valor "node1a2" y tambien tienes un concepto equivocado en campos vectores, estas dando el valor al atributo id con "node[]"

0voto

rach comentado

hola @white muchas gracias por responder, y por tu ayuda, eres un genio

2votos

M1ckey Puntos450

El error ocurre porque estás sobreescribiendo 'onclick', el cual ya está definido en el listener: $('#add_field10).click(...) por lo que habrá una inconsistencia en ejecución.

En lugar de hacerlo por clase hazlo por id, seleccionando #node1 y extrayendo su valor para ponérselo al nuevo campo generado.

$('#add_field10').click(function(e) {
    addField10();
    var node1value = $('#field_grid10 > tbody #node1').val();
    $('#field_grid10 > tbody #nodela').val(node1value);
});

0voto

rach comentado

hola, muchas gracias por responder. como puedo conocer el id si es dinámico? y asi como lo pones, me deja de funcionar el formulario???

0voto

M1ckey comentado

Lo primero que debes de tener en cuenta es que si vas a generar ids es que debes de tener un patrón de generamiento. Si vas a colocar ids al azar se te hará complicado saber a cuál pertenece. Anyway, en este caso concreto lo que te recomiendo es que guardes en una variable global el último id del elemento generado, de esta manera solamente buscas el nuevo elemento generado por medio de la variable global.

0voto

rach comentado

y me pudieras dar un ejemplo?

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta