Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Seleccionar valores de fila de tabla html

Estas en el tema de Seleccionar valores de fila de tabla html en el foro de Jquery en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/10/2015, 12:30
 
Fecha de Ingreso: mayo-2015
Mensajes: 47
Antigüedad: 8 años, 10 meses
Puntos: 0
Información Seleccionar valores de fila de tabla html

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:
Ver original
  1. cadena=cadena + "<td width='50px;'>"+cantidad_produc+"</td>";              
  2. cadena=cadena + "<td width='50px;'>"+precio_produc+"</td>";
  3. cadena=cadena + "<td width='100px;'>"+fecha_produc+"</td>";
  4.  $("#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:
Ver original
  1. cadena=cadena + "<td width='20px;'>
  2.  
  3. <a id='lista_agr' name='lista_agr'><img id='imagen_presentacion' src='images/add.png'/></a>
  4.  
  5. </td>";


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

Código Javascript:
Ver original
  1. $(document).ready(function() {  
  2.         $("#lista_agr").click(function(){
  3.  
  4.             var valores="";
  5.  
  6.             // Obtenemos todos los valores contenidos en los <td> de la fila
  7.             // seleccionada
  8.             $(this).parents("tr").find("td").each(function(){
  9.                 valores+=$(this).html()+"\n";
  10.             });
  11.  
  12.             alert(valores);
  13.         });
  14.     });


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..
  #2 (permalink)  
Antiguo 16/10/2015, 14:07
Avatar de alan_69niupi  
Fecha de Ingreso: junio-2011
Mensajes: 200
Antigüedad: 12 años, 9 meses
Puntos: 17
Respuesta: Seleccionar valores de fila de tabla html

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!!!
  #3 (permalink)  
Antiguo 16/10/2015, 18:11
 
Fecha de Ingreso: mayo-2015
Mensajes: 47
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Seleccionar valores de fila de tabla html

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:
Ver original
  1. 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..
  #4 (permalink)  
Antiguo 17/10/2015, 02:21
 
Fecha de Ingreso: enero-2014
Ubicación: Navarra
Mensajes: 94
Antigüedad: 10 años, 2 meses
Puntos: 18
Respuesta: Seleccionar valores de fila de tabla html

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
  #5 (permalink)  
Antiguo 17/10/2015, 07:01
 
Fecha de Ingreso: mayo-2015
Mensajes: 47
Antigüedad: 8 años, 10 meses
Puntos: 0
Información Respuesta: Seleccionar valores de fila de tabla html

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..
  #6 (permalink)  
Antiguo 17/10/2015, 14:29
 
Fecha de Ingreso: enero-2014
Ubicación: Navarra
Mensajes: 94
Antigüedad: 10 años, 2 meses
Puntos: 18
Respuesta: Seleccionar valores de fila de tabla html

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:
Ver original
  1. <!DOCTYPE html>
  2.   <title>titulo</title>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
  5. table, th, td { border: 1px solid black; border-collapse: collapse;}
  6. td,th {padding:1em;}
  7. th {background-color:silver;}
  8. </style>    
  9.    
  10. <script type="text/javascript">
  11.  
  12. $(document).ready(function(){
  13. $("#btn_anadir").on('click' ,function(e){
  14.         e.preventDefault();
  15.     fila_nueva();
  16.       });
  17. $("#datos").on('click' , 'td' ,function(e){
  18.     var resultado = $(this).parent().children('.total');
  19.     var sum = 0;
  20.              
  21.         $(this).parent().children('td').not('.total').each(function() {
  22.     var valor = $(this).text();
  23.     sum += parseInt(valor);
  24.     });    
  25.         resultado.html(sum)
  26.       });
  27.  
  28. function fila_nueva(){
  29. var fila = '';
  30.   fila += "<tr><td>25</td> <td>50</td> <td>75</td><td class=\"total\"></td></tr>\n";
  31.   $('#datos tbody').append(fila);
  32.    }
  33. });
  34.          
  35. </head>
  36. <body>      
  37. <table id="datos">
  38. <thead><tr><th>valor1</th><th>valor2</th><th>valor3</th><th>suma</th></tr></thead>
  39.   <tr>
  40.     <td>10</td> <td>20</td> <td>30</td>
  41.     <td class="total"></td>
  42.   </tr>
  43.   <tr>
  44.     <td>40</td> <td>50</td> <td>80</td>
  45.    <td class="total"></td>
  46.   </tr>
  47.   <tr>
  48.     <td>15</td> <td>20</td> <td>30</td>
  49.     <td class="total"></td>
  50.   </tr>
  51. </table>  
  52. <button id="btn_anadir">Añadir fila</button>
  53. <div id="muestra"></div>
  54. </body>
  55. </html>

No se si es esto lo que quieres.
Saludos.

Etiquetas: fila, html, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:34.