Question

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

Answer 1

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[]"

Answer 2

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);
});