Foros del Web - Ver Mensaje Individual - Seleccionar valores de fila de tabla html

sintel_1 · #6 (**permalink**) 17/10/2015, 14:29

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<!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.