3

tengo un formulario donde hay un input'search'; que al momento de escribir el nombre, me encuentra las coincidencias y despliega la información de los posibles clientes que estoy buscando. el asunto comienza que al momento de seleccionar la fila tengo que capturar los datos de las celdas de la misma fila O de otra fila y enviarla a unos inputs y guardar la información. solo tengo que capturar una fila con los 'td' de la fila, no varias filas con sus 'td'. por la situación es que un cliente puede tener varias direcciones. les dejo el codigo. Muchas Gracias.

<!--input search Html-->
        <input type="type" name="busqueda" id="busqueda" class="form-control" placeholder="Buscar cliente...">
        <br>
        <br>


         <table class="table table-hover" id="tabla"><!--Tabla-->
          <div id="tabla_resultado"><!--Tabla donde se despliega tr ytd-->

          </div>
        </table>
        <br>
        <input id="nombre">
<!--Fnn html -->

$tabla.=
    '

     <thead class="table-dark">
      <tr>
       <td>N°</td>
       <td>Nombre</td>
       <td>Apellido</td>
       <td>Empresa</td>
       <td>Colonia</td>
       <td>Direccion</td>
       <td>Razon Social</td>
     </tr>
     </thead>
     ';

    while($fila = mysqli_fetch_array($query,MYSQLI_ASSOC))
    {


        $tabla.='


             <tbody>
             <tr style="cursor:pointer">
             <td>'.$fila['id_cliente'].'</td>
             <td>'.$fila['nombre_cliente'].'</td>
             <td>'.$fila['apellido_cliente'].'</td>
             <td>'.$fila['n_empresa'].'</td>
             <td>'.$fila['colonia'].'</td>
             <td>'.$fila['n_direccion'].'</td>             
             <td>'.$fila['razon_social'].'</td
             </tr>
             </tbody
             ';

    }



$(document).ready(function() {
    var table = document.querySelector('#tabla tr td');
     if(table == null){
        alert(table);
     }else if(table = 1){
        for(var i = 1; i < table.rows.length; i++){
            table.rows[i].onclick = function(){
                document.querySelector("#nombre").value = this.cells[0].innerHTML;
            }
        }
     }
  // Instrucciones a ejecutar al terminar la carga
});

2 respuestas 2

3

Veo que estas usando jquery para la funcion $(document).ready(), sin embargo no lo usas para todo lo demas. Si vas a usar jQuery, es una buena practica que no lo mezcles con vanilla javascript. Te dejo una solucion utilizando todo el potencial de jQuery.

$(document).ready(function() {
    var rows = $('#tabla tbody tr');
     if(!rows[0]){
        console.log(table);
     }else {
        $('#tabla tbody').on('click', 'tr', function(i, row) {
            $("#nombre").val($(this).find('td:eq(0)').text());
        });
     }
  // Instrucciones a ejecutar al terminar la carga
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tabla">
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
  </tbody>
</table>
<input type="text" id="nombre">

3
  • Muchas gracias.. lo que pasa es que la tabla es dinamica y se imprime al momento de hacer la busqueda en el input, y la funcion se inicia antes de la busqueda y me regresa un [objeto Objeto en la alerta.] creo que la solucion es facil pero supongo que ya me bloquie.. console.log(table) jquery lo toma como error Commented el 19 jul. 2018 a las 22:52
  • Dos cosas. Primero, tienes el <tbody> dentro del while, deberia estar afuera. Segundo, edite mi respuesta para que lea tambien las <tr> dinamicas.
    – alanfcm
    Commented el 19 jul. 2018 a las 22:58
  • De nuevo te lo agradezco mucho.. le faltaba las comas ('table'), funciona perfecto.. el problema es el php, ya que ni bootstrap responde cuando se imprime la tabla.. Commented el 20 jul. 2018 a las 2:21
1

El problema estaba que la tabla no es estatica y al momento de cargarla en el documento la función la realizaba antes de que cargue. me dio mucho dolor de cabeza pero finalmente me quedo.. muchas gracias alanfcm

// tabla dinamica al momento de cargar
$(document).on('click','#tabla tbody tr', function() {//seleccionar la fila con los elementos
  $("#nombre").val($(this).find('td:eq(1)').text()); // asigna el valor al input
  $("#colonia").val($(this).find('td:eq(4)').text());// asigna el valor al input
   $("#direccion").val($(this).find('td:eq(5)').text());// asigna el valor al input
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.