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

capturar valores del input para mostrarlos en fila de una tabla

saludo amigos tiempos sin pasar por aquí tengo un problema tengo este script el cual funciona bien pero necesito capturar los valores del los input que se hallan dentro del formulario, para ser mas preciso:

var fila='<tr class="selected" id="fila'+cont+'" onclick="seleccionar(this.id);"><td>'+cont+'</td><td>valor del input</td><td>valor input monto</td><td>monto</td></tr>';
<script>
           $(document).ready(function(){

            $('#bt_add').keypress(function(event){
                 var keycode = (event.keyCode ? event.keyCode : event.which);
                 if(keycode == '13'){
                agregar(); 
                }
             });

              $( "#idFormulario" ).submit(function( event ) {
               event.preventDefault();
               });

        $('#bt_del').click(function(){
            eliminar(id_fila_selected);
        });

        $('#bt_delall').click(function(){
            eliminarTodasFilas();
        });

    });
    var cont=0;
    var id_fila_selected=[];
    function agregar(){
        cont++;
        var fila='<tr class="selected" id="fila'+cont+'" onclick="seleccionar(this.id);"><td>'+cont+'</td><td>valor del input</td><td>valor input monto</td><td>monto</td></tr>';

        $('#tabla_ventas').append(fila);
        reordenar();
    }

    function seleccionar(id_fila){
        if($('#'+id_fila).hasClass('seleccionada')){
            $('#'+id_fila).removeClass('seleccionada');
        }
        else{
            $('#'+id_fila).addClass('seleccionada');
        }
        //2702id_fila_selected=id_fila;
        id_fila_selected.push(id_fila);
    }

    function eliminar(id_fila){
        /*$('#'+id_fila).remove();
        reordenar();*/
        for(var i=0; i<id_fila.length; i++){
            $('#'+id_fila[i]).remove();
        }
        reordenar();
    }

    function reordenar(){
        var num=1;
        $('#tabla_ventas tbody tr').each(function(){
            $(this).find('td').eq(0).text(num);
            num++;
        });
    }
    function eliminarTodasFilas(){
$('#tabla_ventas tbody tr').each(function(){
            $(this).remove();
        });

    }
</script>

2 Respuestas

2votos

yoclens Puntos1740

la solución al problema:

function agregar() {
    var fila = '';
    $('input[name^="fk_hora_sorteo"]').filter(':checked').each(function() {
        cont++;
        fila = '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id)"><td>' + cont + '</td><td>' + $('input[name="fk_animalito"]').val() + '</td><td>' + $(this).val() + '</td><td>' + $('input[name="monto"]').val() + '</td></tr>';
        $('#tabla_ventas').append(fila);
        reordenar();
    })
}

Leonardo-Tadei comentado May 27

Gracias por compartir, @yoclens ... lo que no entiendo es qué tiene que ver agregar dinámicamente una fila a una tabla, que es lo que hace tu código, con "capturar valores del INPUT", que es lo que dice tu pregunta...

Si el título de la pregunta está mal, cambialo, así le sirve a otros!

2votos

Leonardo-Tadei Puntos211470

Hola @yoclens,

podés capturar los valores de los TD de una fila así:

<!DOCTYPE html>
<html>
<head>
<title>Capturar valores de fila</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function seleccionar(id) {
    var tr = document.getElementById(id);
    for (var i=0;i < tr.cells.length; i++) {
        var valor = tr.cells[i].innerHTML;
        console.log('Capturado: '+valor);
    }       
}
</script>
</head>
<body>

<table>
    <tr class="selected" id="fila1" onclick="seleccionar(this.id);"><td>1</td><td>valor del input</td><td>valor input monto</td><td>monto</td></tr>
    <tr class="selected" id="fila2" onclick="seleccionar(this.id);"><td>2</td><td>otro valor del input</td><td>otro input monto</td><td>otro monto</td></tr>
    <tr class="selected" id="fila18" onclick="seleccionar(this.id);"><td>18</td><td>valor 18</td><td>programacion</td><td>187.18</td></tr>
</table>

</body>
</html>

Yo puse el valor capturado en un console.log() para verlo, pero vos lo tenés que cargar en dónde te haga falta para usarlo.

En la función puse un bucle para que funcione en una tabla de cualquier cantidad de columnas, pero si la cantidad de columnas es fija, podés acceder directamente a cada valor así:

var valor0 = tr.cells[0].innerHTML;
var valor3 = tr.cells[3].innerHTML;

Saludos cordiales

yoclens comentado May 26

hola @Leonardo-Tadei espero estes bien amigo fijate lo hecho asi:

var fila='<tr class="selected" id="fila'+cont+'" onclick="seleccionar(this.id);"><td>'+cont+'</td><td>'+$('input[name="fk_animalito"]').val();+'</td><td>'+$('input[name="fk_hora_sorteo[]"]')[0].val();+'</td><td>'+$('input[name="monto"]').val();+'</td></tr>';

pero ahora mi problema es este: estoy utilizando un array en una consulta no se me agrega este valor, te explico:

<?php
     $consulta = $DB_con->query("SELECT * FROM hora_sorteo ORDER BY id");
       if($consulta->rowCount() > 0){
          while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {

    echo "<div class='col s6 m2'>";
    echo "<input type='checkbox' name='fk_hora_sorteo[]' id='chk1{$linea['id']}' value='{$linea['id']}'>";
    echo "<label class='black-text' for='chk1{$linea['id']}'>{$linea['hora_sorteo']}</label>";
    echo "</div>";

     }

 }

   else

          echo "<div class='col s12 card-panel yellow darken-2 center'>
          <h5 class='black-text text-darken-2 center CONDENSED LIGHT5'>¡ Advertencia: No se ha encontrado ningún registro !</h5>
          </div>";

?>
<input type='checkbox' name='fk_hora_sorteo[]' id='chk1{$linea['id']}' value='{$linea['id']}'>";

lo saco como un array

Leonardo-Tadei comentado May 26

y cómo se relaciona la fila escrita en JavaScript con el código PHP que tenés acá arriba?

yoclens comentado May 26

'+$('input[name="fk_hora_sorteo[]"]')[0].val();+'

Leonardo-Tadei comentado May 27

Perdón @yoclens, pero no entiendo qué tiene que ver todo esto con el problema de extraer los datos de los TD de la fila de una tabla HTML...

Esto es otro problema/pregunta o yo entendí mal desde el principio???

yoclens comentado May 27

el problema es que el me captura los demás datos como el numero y el monto pero el sorteo que seria la hora del sorteo no me la captura me imagino es que como la estoy pasando como array

Leonardo-Tadei comentado May 27

Poné para que la veamos como sería la tabla que se genera... viendo el HTML puro seguro que le encontramos alguna solución.

Si por cómo es el código, se complica sacar la tabla para copiar y pegarla, escribí a mano la tabla con 2 o 3 filas para que podamos verla.

yoclens comentado May 27

el formulario:

<form id="idFormulario" action="" method="POST">

<!-- section -->
    <section>
         <div class="row">
           <div class="container">

  <?php
     $consulta = $DB_con->query("SELECT * FROM hora_sorteo ORDER BY id");
       if($consulta->rowCount() > 0){
          while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {

    echo "<div class='col s6 m2'>";
    echo "<input type='checkbox' name='fk_hora_sorteo[]' id='chk1{$linea['id']}' value='{$linea['id']}'>";
    echo "<label class='black-text' for='chk1{$linea['id']}'>{$linea['hora_sorteo']}</label>";
    echo "</div>";

     }

 }

   else

          echo "<div class='col s12 card-panel yellow darken-2 center'>
          <h5 class='black-text text-darken-2 center CONDENSED LIGHT5'>¡ Advertencia: No se ha encontrado ningún registro !</h5>
          </div>";

?>

              </div>
        </div>
   </section>

  <section>
      <div class="row">

<?php
  $consulta = $DB_con->query("SELECT * FROM animalitos ORDER BY id");
    if($consulta->rowCount() > 0){
      $i=1;
        while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
    ?>

       <div class="col s1 m1">
            <div class="chip">
              <img src="../galerias_animalitos/<?= $linea['portada']?>"  alt="imagen animalitos"/>
                <?php echo $linea['numero']; ?> <?php echo $linea['nombre']; ?>
           </div>
      </div>

<?php
    $i++;
     }
  }
     else

              echo "<div class='col s12 card-panel yellow darken-2 center'>
              <h5 class='black-text text-darken-2 center CONDENSED LIGHT5'>¡ Advertencia: No se ha encontrado ningún registro !</h5>
              </div>";

?>

           </div>
 </section>
<!-- fin section -->

    <div class="row">

        <div class="col s12 m5">

                 <div class="input-field col s12 m4">
                 <input type="text" name="fk_animalito" autocomplete="off" required/>
                 <label for="descripcion" class="black-text ">Numero Animalito:</label>
                 </div>

                <div class="input-field col s12 m4">
                <input id="bt_add" type="text" name="monto" autocomplete="off" required/>
                <label for="descripcion" class="black-text ">Monto:</label>
                </div>

       <br>
            <br>
            <br>
       <br>

               <button class="btn waves-effect blue darken-4 btn-small" type="submit" name="guardar">Generar Jugada</button>

               <button id="bt_del" class="btn waves-effect red btn-medium">Eliminar</button>

               <button id="bt_delall" class="btn waves-effect red btn-medium">Eliminar Todo</button>

               <div class="col center s12 m12">
                  <h4 class="left-align black-text">Serial:             Total:</h4>
               </div>

       </div>

</form>
        <div class="col s12 m7">

            <div style=' overflow: auto; height: 250px;'>

                <table id="tabla_ventas" class='bordered responsive-table centered'>
                    <thead>
                        <tr>
                             <th data-field='N&#186;'>N°</th>
                             <th data-field='N&#186;'>ANIMALITO</th>
                             <th data-field='Código'>SORTEO</th>
                             <th data-field='Código'>MONTO</th>

                        </tr>
                    </thead>
                </table>

            </div>
        </div>

  </div>

el java:

<script>
           $(document).ready(function(){

            $('#bt_add').keypress(function(event){
                 var keycode = (event.keyCode ? event.keyCode : event.which);
                 if(keycode == '13'){
                agregar();
                }
             });

              $( "#idFormulario" ).submit(function( event ) {
               event.preventDefault();
               });

        $('#bt_del').click(function(){
            eliminar(id_fila_selected);
        });

        $('#bt_delall').click(function(){
            eliminarTodasFilas();
        });

    });
    var cont=0;
    var id_fila_selected=[];
    function agregar(){
        cont++;

var fila='<tr class="selected" id="fila'+cont+'" onclick="seleccionar(this.id);"><td>'+cont+'</td><td>'+$('input[name="fk_animalito"]').val();+'</td><td>'+$($('input[name^="fk_hora_sorteo"]')[0]).val()+'</td><td>'+$('input[name="monto"]').val();+'</td></tr>';

//console.log($('input[name^="fk_hora_sorteo"]')[0]);
//console.log($('input[name~="fk_hora_sorteo"]'));

        $('#tabla_ventas').append(fila);
        reordenar();
    }

    function seleccionar(id_fila){
        if($('#'+id_fila).hasClass('seleccionada')){
            $('#'+id_fila).removeClass('seleccionada');
        }
        else{
            $('#'+id_fila).addClass('seleccionada');
        }
        //2702id_fila_selected=id_fila;
        id_fila_selected.push(id_fila);
    }

    function eliminar(id_fila){
        /*$('#'+id_fila).remove();
        reordenar();*/
        for(var i=0; i<id_fila.length; i++){
            $('#'+id_fila[i]).remove();
        }
        reordenar();
    }

    function reordenar(){
        var num=1;
        $('#tabla_ventas tbody tr').each(function(){
            $(this).find('td').eq(0).text(num);
            num++;
        });
    }
    function eliminarTodasFilas(){
$('#tabla_ventas tbody tr').each(function(){
            $(this).remove();
        });

    }
</script>

Leonardo-Tadei comentado May 27

Hola @yoclens,

no me expliqué bien: lo que hace falta es la tabla en HTML como sea que quede después de generada.

Algo como:

<table>
    <tr class="selected" id="fila1" onclick="seleccionar(this.id);"><td>1</td><td>valor del input</td><td>valor input monto</td><td>monto</td></tr>
    <tr class="selected" id="fila2" onclick="seleccionar(this.id);"><td>2</td><td>otro valor del input</td><td>otro input monto</td><td>otro monto</td></tr>
    <tr class="selected" id="fila18" onclick="seleccionar(this.id);"><td>18</td><td>valor 18</td><td>programacion</td><td>187.18</td></tr>
</table>

Nosotros no podemos correr ese código para generar la tabla, porque nos falta todo el resto de la aplicación y los datos...

yoclens comentado May 27

gracias amigo ya lo pude resolver anexare la solucion

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

¿Conoces alguien que puede responder?
¡Comparte esta pregunta!


Actividad Reciente

¿Eres Usuario Apple?

...

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

Conecta