Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

JavaScript - funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

Publicado por Jessica (6 intervenciones) el 27/10/2017 20:27:09
Hola, tengo el siguiente código que me trae al input " numConEq" el numero de control de la fila que selecciono, que es el primero en este caso, pero cuando doy click en el boton "seleccionar" de cualquier otra fila ya no hace nada o me mantiene el mismo numero de control de la primera fila. No se que este mal con mi función o si alguien puede ayudarme a corregirla si tengo algo mal. Lo que realmente quiero hacer es pasar toda la fila que seleccione con el boton "seleccionar" a los input que corresponden en el formulari: ej. numero de control con el registro numConEq, numero de inventario con el registro numInvEq y asi.


// Les dejo mi función java Script.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function volcar_valores(teq) {
    tr = document.getElementById(teq);
    td = tr.getElementsByTagName('td');
    idDiv = document.getElementById('numInvEq');
    inputDiv = idDiv.getElementsByTagName('input');
    for (i = 0; i < td.length; i++)
    {
        inputDiv[i].value = td[i].innerHTML;
    }
}
 
 
// Input NumControl

 
<div class="form-group" >
    <label for="num_control_eq" class="col-sm-2 control-label">No. Control:</label>
    <div class="col-sm-10" id="numConEq">
        <input type="text" class="form-control" id="num_control_eq" name="num_control_eq"
        placeholder="Ej. ALE0016">
    </div>
</div>
 
 
// TABLA

 
<table id="teq">
    <thead>
        <tr>
            <th id = "nce">N° Control</th>
            <th id = "nie">N° Inventario</th>
            <th id = "te">Tipo Equipo</th>
            <th id = "me">Marca</th>
            <th id = "nse">N° Serie</th>
            <th id = "ae">Área</th>
            <th id = "acce">Acción</th>
        </tr>
    </thead>
 
    <?php while ($row1 = sqlsrv_fetch_array($result1)) {
        ?>
 
        <tbody class="contenidobusqueda">
            <tr>
                <td id="first-child"><?php echo $row1['numControl']; ?></td>
                <td id="second-child"><?php echo $row1['numContraloria']; ?></td>
                <td id="third-child"><?php echo $row1['tipoEquipo']; ?></td>
                <td id="fourth-child"><?php echo $row1['marca']; ?></td>
                <td id="fifth-child"><?php echo $row1['serie']; ?></td>
                <td id="sixth-child"><?php echo $row1['NombreArea']; ?></td>
                <td><button type="button" class="btn btn-default"
              onclick="volcar_valores('teq')">Seleccionar</button></td>
            </tr>
        </tbody>
 
 
    <?php } ?>
</table>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

Publicado por abzerox (130 intervenciones) el 28/10/2017 07:40:36
Hola, hize algunas modificaciones en tu código javascript, prueba con la siguiente función:

1
2
3
4
5
6
7
8
9
10
11
12
13
function volcar_valores(e) {
    // fila que contiene a el bóton en la cual se se hizo el click

    var current_tr = e.target.parentNode.parentNode;
    // columnas dentro de la fila

    var columns = current_tr.children;
    // Array con los inputs del form

    var inputs = Array.prototype.slice.call(document.querySelectorAll('#numInvEq input'));
 
    // recorro y completo los inputs

    for (var i = 0; i < columns.length; i++) {
        input[i].value = columns[i].innerHTML;
    }
}

Tambien cambia el bóton por este:

1
2
<button type="button" class="btn btn-default"
onclick="volcar_valores()">Seleccionar</button>

No es necesario que le pases el id de la tabla, ya que al pulsar cada botón se obtiene la fila a la cual pertenece y por ende se pueden recuperar los datos de las columnas.

prueba y nos comentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

Publicado por Jessica (6 intervenciones) el 30/10/2017 15:45:46
No me funciona :( ya lo implementé pero no me muestra en el input la informacion
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

Publicado por abzerox (130 intervenciones) el 31/10/2017 04:45:52
Hola, no se si entendí bien es solo un input en el cuál quieres mostrar los datos de las columnas ? De ser así puedes intentar con estas modificaciones:
1
2
3
4
5
6
7
8
function volcar_valores(e) {
    var current_tr = e.target.parentNode.parentNode;
    var columns = Array.prototype.slice.call(current_tr.children);
    var input = document.getElementById('num_control_eq');
    columns.forEach(function(col) {
         input.value += col.innerHTML;
    }
}

Nos comentas si funciono.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

Publicado por Jessica (6 intervenciones) el 31/10/2017 16:50:32
Ya lo logré con esta función:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// SCRIPT

 
$(document).ready(function() {
    $(".boton").click(function() {
 
        var valor1 = "";
        var valor2 = "";
        var valor3 = "";
        var valor4 = "";
        var valor5 = "";
 
        // Obtenemos todos los valores contenidos en los <td> de la fila

        // seleccionada

        $(this).parents("tr").find("#first-child").each(function() {
            valor1 += $(this).html() + "\n";
            $('#num_control_eq').val(valor1);
        });
 
        $(this).parents("tr").find("#second-child").each(function() {
            valor2 += $(this).html() + "\n";
            $('#num_inventario_eq').val(valor2);
        });
 
        $(this).parents("tr").find("#third-child").each(function() {
            valor3 += $(this).html() + "\n";
            $('#tipo_equipo').val(valor3);
 
        });
 
        $(this).parents("tr").find("#fourth-child").each(function() {
            valor4 += $(this).html() + "\n";
            $('#marca_eq').val(valor4);
        });
 
        $(this).parents("tr").find("#fifth-child").each(function() {
            valor5 += $(this).html() + "\n";
            $('#num_serie_eq').val(valor5);
        });
    });
});

Muchas gracias por sus comentarios, ahora el problema que tengo es que en mi formulario tengo 2 select option y por ende no me rellena con el texto traido de la tabla al dar click en el botón seleccionar, como podría hacerle para que al seleccionar la fila me rellene tambien los select option asi como los input?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de abzerox
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

funcion para llenar input con registro de tabla al presionar un boton "seleccionar"

Publicado por abzerox (130 intervenciones) el 01/11/2017 03:19:34
Hola, veo que estas utilizando jQuery pero estas repitiendo mucho código innecesario, puedes cambiar por lo siguiente solo como mejora:

1
2
3
4
$inputs = $('#numConEq input.form-control');
$(this).parents('tr').children().each(function(index) {
            $inputs[index].val($(this).html() + '\n');
});


En cuanto a los elementos selects, puedes simplemente seleccionar el select y utilizar el metodo append() para agregar elementos en este, algo así:

1
2
$select = $('#IDselect');
$select.append("<option value='"+ AQUÍ EL VALOR +"'> AQUÍ EL VALOR </option>");
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar