I can not get registration id in a html table with javascript

Navigation
1

I have the following code 

document.querySelector("#resultado").addEventListener("click", 
      function(event){
         var id= $(this).find("tr").html();   
        alert(id);

                    }, false);
      });

but I can not get the id. It is a product table and the first column is the idproduct. I work with MVC for what is created dynamically. After obtaining the id and the amount I will add it to a ticket detail but that later.

the html created from php is: 

        $arrayfiltrado=$P1->filtrar($tipoFiltro,$cadena);
     $tabla ="<caption> CATALOGO DE ARTICULOS</caption>

<tr> <th>COD.:</th> <th>DESCRIPCION</th> <th>MARCA</th>
<th>CATEGORIA</th> <th>P/U</th>
</tr>";
       /* No olvide el THEAD y sus TD para formar el encabezado de la tabla */
       /* Contenido de la tabla */
       $tabla .="<tbody>";
       foreach ($arrayfiltrado as $p){
          $tabla .="<tr>";
             /* Un TD por cada datos que quieras mostrar; emj con el mail */
             $tabla .="<td>".$p["idproducto"]."</td>";
             $tabla .="<td>".$p["nombre"]."</td>";
             $tabla .="<td>".$p["marca"]."</td>";
             $tabla .="<td>".$p["categoria"]."</td>";
             $tabla .="<td>".$p["precio"]."</td>";
          $tabla .="</tr>";
       }
       $tabla .="</tbody>";
       $tabla .="</table>";
       echo $tabla;
           }}
    
asked by Caruso 15.05.2018 в 20:38
source

4 answers

1

Without seeing the structure of your HTML it is a bit more difficult, but you can do it like this: 

$("#resultado tbody tr").on("click", function(event){
     var id= $(this).find("td:first-child").html();   
     alert(id);
 });
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="resultado">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10</td>
      <td>peras</td>
    </tr>
    <tr>
      <td>15</td>
      <td>manzanas</td>
    </tr>
  </tbody>
</table>
    
answered by 15.05.2018 / 20:40
source
0

You are mixing two things, pure javascript with the jQuery library. You should add the library first from jQuery to the html and then change the event to jQuery. 

$("#resultado").click(function(event) {
  var id = $(this).find("tr").html();   
  alert(id);
});
    
answered by 15.05.2018 в 20:48
0

I guess what you want is to get the ID of the row where you click, although your post is a bit confusing. 

// Detectar clic en una fila
$('#resultado tr').click(() => {
    // Obtener el texto de la primera celda de la fila que es el ID
    let id = $(this).find('td:first-child').text();
    // Mostrar alert con el ID obtenido
    alert(id);
});
    
answered by 15.05.2018 в 21:02
0

Well the error was in the DOM. I mean, I was not creating the body tag on the table. the right thing is like this: 

<table id="resultado">
<thead>
<tr> <th>COD.:</th> <th>DESCRIPCION</th> <th>MARCA</th>
            <th>CATEGORIA</th> <th>P/U</th>
            </tr></thead>
            <tbody>
            
            </tbody>
</table>

Igua if I use "" dynamically, that is to say the one that creates Jquery with the JSON this does not work to go through the table, then the code that I am staying is the following: 

$("#resultado tbody").click(function(event) {
  $("tr").click(function(event) {
  var id = $(this).find("td:first-child").text();
 alert(id);

});

in the document ready event. The same I will leave a checkbox in each row, which is also marked by clicking anywhere in it.

    
answered by 09.07.2018 в 22:49
Genexus Change Base Data Keydown event is lost when opening modal