[SOLUCIONADO] Seleccionar valores de fila de tabla html

[EmilianoEmiliano]

Hola como estan, tendrian la amabilidad de brindarme sus consejos para resolver lo siguiente:

Tengo una tabla htm, la cual se va llenando de datos al agregarlos de la siguiente manera:

Código Javascript:

cadena=cadena + "<td width='50px;'>"+cantidad_produc+"</td>";               
cadena=cadena + "<td width='50px;'>"+precio_produc+"</td>";
cadena=cadena + "<td width='100px;'>"+fecha_produc+"</td>";
 $("#tablas_utilidad_producto tbody").append(cadena);
 

Pero en la tabla tambien hay un campo que sirve para seleccionar los valores de las filas:

Código Javascript:

cadena=cadena + "<td width='20px;'>
 
<a id='lista_agr' name='lista_agr'><img id='imagen_presentacion' src='images/add.png'/></a>
 
</td>";
 

Y de esta forma selecciono la fila entera al hacer click:

Código Javascript:

$(document).ready(function() {  
        $("#lista_agr").click(function(){
 
            var valores="";
 
            // Obtenemos todos los valores contenidos en los <td> de la fila
            // seleccionada
            $(this).parents("tr").find("td").each(function(){
                valores+=$(this).html()+"\n";
            });
 
            alert(valores);
        });
    });
 

Pero no funciona, he probado de varias formas pero no logro obtener los valores de los td de esa fila.

Gracias por brindarme su guía..

[alan_69niupi]

Hola

yo uso estas librerías

dataTables.jqueryui.css
dataTables.jqueryui.js
jquery.dataTables.css
jquery.dataTables.js

y el código es

function funcionJS(repositorioid, activoid, empresaid) {
if (repositorioid != "") {
$("#vista-content").html("");
var tituloTramite = '<div class="divTituloTramite">Trámite</div>';
$("#vista-content").append(tituloTramite);
var tabla = new $('<table class="display" cellspacing="0" width="100%" id="vistalista" >' +

'<thead>' +
'<tr><th colspan="6" style="background-color: white;"></th></tr>'+
'<tr>' +
'<th ></th>' +
'<th >Nombre documento</th>' +
'<th ></th>' +
'</tr>' +
'</thead>' +
'</table>');
$("#vista-content").append(tabla);

table = $(tabla).DataTable({
"data": Lista//Es una lista de objetos que contiene las propiedades que necesito
"filter": false,
"bInfo": true,
"bStateSave": true,
"order": [[1, "desc"]],

"oLanguage": {
"sEmptyTable": "No se encontraron coincidencias",
"oPaginate": {
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"sLengthMenu": "Mostrar _MENU_ resultados",
"sInfo": "Se muestran _START_ a _END_ de _TOTAL_ registros",
"sInfoEmpty": "No hay registros"
},
"columns": [
{
"class": 'details-control parent',
"orderable": false,
"data": null,
"defaultContent": '',
"width": "20"
},
{
"data": "Tramite.Nombre",
"class": 'fontVistaLista parent'
},

{
//MENU HERRAMIENTAS
"class": 'herramientas-tramite-control parent',
"orderable": false,
"data": null,
"defaultContent": ''

}
],
"createdRow": function (row, data, index) {

//Aqui le estamos inyectando los atributos a los rows
$('td', row).attr('tramiteproyectoid', data.TramiteProyectoID);
$('td', row).attr('tramiteid', data.Tramite.TramiteID);
$('td', row).attr('proyectoid', repositorioid); //data.ProyectoID);
$('td', row).attr('estatusTramite', data.EstatusTramite);
$('td', row).attr('nombre', data.Tramite.Nombre);
$('td', row).eq(4).attr('title', 'Subir documento');
var estatustag = loadEstatusTramite(data.EstatusTramite);

$('input[name=estatusTramite]').attr('tramiteproyectoid', data.TramiteProyectoID);
$('input[name=estatusTramite]').attr('proyectoid', repositorioid);
$('input[name=estatusTramite]').attr('estatusTramiteAnt', data.EstatusTramite);


$('td', row).eq(3).css({'font-text':'11px'});
$('td', row).eq(3).html(estatustag);
$('td',row).eq(2).html(getAvanceTramite(data.Trami teProyectoID).toFixed(2)+'%');

}
});


$('#vistalista tbody').on('click', 'td.herramientas-tramite-control', function(e, o) {

//Aqui llenamos la variables o con los atributos de este row y lo hace cuando le damos click a la clase que se le agrego a la tabla
var empresa = $("#lblEmpresa").attr("empresaid");
var activo = $("#lblEmpresa").attr("activoid");
var proyecto = $(this).attr("proyectoid");
var tramiteproyecto = $(this).attr("tramiteproyectoid");
var nombre = $(this).attr("nombre");


});


}


espero te sirva saludos!!!

[EmilianoEmiliano]

Hola gracias por responder, ya habia probado algo similar a lo que me explica pero deseaba realizarla de la manera en que plateo anteriormente.

Me he fijado que no ingresa al evento al hacer click en la celda o botón.

Código Javascript:

cadena = cadena + "<td width='20px;'><a class='list' title='Eliminar de lista de ventas'><img src='../../././images/delete.png' /></a></td>";
 

Coloque un punto de interrupciòn pero simplemente no ingresa:

function fn_dar_p(){
$("a.list").on( "click", function(){
alert("Hola");


// }
});
};

Tal ves me podrian recomendar algo màs..

[sintel_1]

Hola.

Sin ver todo el codigo es dificil saber donde falla.
De primeras, cuando creas la fila no veo que crees la etiqueta <tr> ni el cierre de esta, sin eso el selector no puede funcionar nunca.

la suma de valores ;

valores+=$(this).html()+"\n";

ahi estas obteniendo el valor html, deberias de usar algo asi:

valores+=parseFloat( $(this).text() )+"\n";

con los pocos datos que das tampoco podemos hacer mucho mas.
saludos

[EmilianoEmiliano]

Hola gracias por responder.
El codigo que coloque anteriormente es una parte del proceso para agregar datos a la tabla, se agrega normalmente los valores a la tabla.

El problema es que al hacer click en el tr de alguna fila me obtenga los valores de los td, me recomiendan alguna forma de hacerlo..

[sintel_1]

Hola.

Habria qie ver el codigo html para poder hacer un selector correctamente,
pero con los datos que das seria algo asi:

Código HTML:

<!DOCTYPE html>
<html>
<head>
  <title>titulo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<style>
table, th, td { border: 1px solid black; border-collapse: collapse;}
td,th {padding:1em;}
th {background-color:silver;}
</style>    
    
<script type="text/javascript"> 
 
$(document).ready(function(){
$("#btn_anadir").on('click' ,function(e){
        e.preventDefault();
    fila_nueva();
      });
$("#datos").on('click' , 'td' ,function(e){
    var resultado = $(this).parent().children('.total');
    var sum = 0;
             
        $(this).parent().children('td').not('.total').each(function() {
    var valor = $(this).text();
    sum += parseInt(valor);
    });     
        resultado.html(sum)
      });
 
function fila_nueva(){
var fila = '';
  fila += "<tr><td>25</td> <td>50</td> <td>75</td><td class=\"total\"></td></tr>\n";
  $('#datos tbody').append(fila); 
   }
});
         
</script>
</head>
<body>       
<table id="datos">
<thead><tr><th>valor1</th><th>valor2</th><th>valor3</th><th>suma</th></tr></thead>
<tbody> 
  <tr>
    <td>10</td> <td>20</td> <td>30</td>
    <td class="total"></td>
  </tr>
  <tr>
    <td>40</td> <td>50</td> <td>80</td>
   <td class="total"></td>
  </tr>
  <tr>
    <td>15</td> <td>20</td> <td>30</td>
    <td class="total"></td>
  </tr>
</tbody>
</table>   
<button id="btn_anadir">Añadir fila</button>
<div id="muestra"></div>
</body> 
</html>
 

No se si es esto lo que quieres.
Saludos.