Dynamic table with td and tr selectable

Question

Dynamic table with td and tr selectable

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

I have a form where there is an input'search '; that at the time of writing the name, it finds the coincidences and displays the information of the possible clients that I am looking for. the matter begins that when selecting the row I have to capture the data of the cells of the same row OR of another row and send it to some inputs and save the information. I just have to capture a row with the 'td' of the row, not several rows with their 'td'. Because of the situation, a client can have several addresses. I leave the code. Thank you very much.

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

javascript

asked by jorge enrique chan castillo 19.07.2018 в 23:22

source

2 answers

1

The problem was that the table is not static and when loading it in the document the function was performed before loading. It gave me a lot of headache but finally I stay .. thank you very much 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
});

answered by 21.07.2018 в 14:32

I need to show the date by MySQL rows and columns and the SQL does not work Send data to jInternalFrame with a button from another JinternalFrame, without losing its visibility. JAVA

score 2 · Accepted Answer

I see that you are using jquery for the function $(document).ready() , however you do not use it for everything else. If you are going to use jQuery, it is a good practice that you do not mix it with vanilla javascript. I leave you a solution using the full potential of 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">