entre Desarrolladores

Question

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>

Answer 1

2 Respuestas

Answer 2 · 2017-05-27T23:14:35+0000

2votos

yoclens Puntos1770

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

respondido por yoclens (1.770 puntos) May 27, 2017

Answer 3 · 2017-05-26T13:51:05+0000

2votos

Leonardo-Tadei Puntos227320

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

respondido por Leonardo-Tadei (227.320 puntos) May 26, 2017

2votos

yoclens comentado May 26, 2017

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

comentado por yoclens (1.770 puntos) May 26, 2017

1voto

Leonardo-Tadei comentado May 26, 2017

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

comentado por Leonardo-Tadei (227.320 puntos) May 26, 2017

1voto

yoclens comentado May 26, 2017

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

comentado por yoclens (1.770 puntos) May 26, 2017

1voto

Leonardo-Tadei comentado May 27, 2017

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???

comentado por Leonardo-Tadei (227.320 puntos) May 27, 2017

1voto

yoclens comentado May 27, 2017

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

comentado por yoclens (1.770 puntos) May 27, 2017

1voto

Leonardo-Tadei comentado May 27, 2017

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.

comentado por Leonardo-Tadei (227.320 puntos) May 27, 2017

1voto

yoclens comentado May 27, 2017

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>

comentado por yoclens (1.770 puntos) May 27, 2017

1voto

Leonardo-Tadei comentado May 27, 2017

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...

comentado por Leonardo-Tadei (227.320 puntos) May 27, 2017

1voto

yoclens comentado May 27, 2017

gracias amigo ya lo pude resolver anexare la solucion

comentado por yoclens (1.770 puntos) May 27, 2017

Pregunta

capturar valores del input para mostrarlos en fila de una tabla

Por favor, accede o regístrate para añadir un comentario.

2 Respuestas

Leonardo-Tadei comentado May 27, 2017

Por favor, accede o regístrate para añadir un comentario.

yoclens comentado May 26, 2017

Leonardo-Tadei comentado May 26, 2017

yoclens comentado May 26, 2017

Leonardo-Tadei comentado May 27, 2017

yoclens comentado May 27, 2017

Leonardo-Tadei comentado May 27, 2017

yoclens comentado May 27, 2017

Leonardo-Tadei comentado May 27, 2017

yoclens comentado May 27, 2017

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta