通过jum总结colum值可以在多个表中获得总数

Question

我使用php/mysql中的循环生成多个表，结构相同但值不同。我有一个脚本来总结所有值并显示结果，但只有当值在同一行时才有效。我只需要总结“precio”列。

这是一个HTML。这是表的结构：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

    $('tr').each(function() { 

     var sum = 0 

     $(this).find('.precio').each(function() { 
      var precio = $(this).text(); 
      if (!isNaN(precio) && precio.length !== 0) { 
       sum += parseFloat(precio); 
      } 
     }); 

     $('.total_prt', this).html(sum); 
    }); 
}); 
</script> 
     <table class="table table-striped"> 
       <thead> 
        <tr> 
         <th width="70%">Descripción</th> 
         <th width="20%">Precio</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
        <td>Display</td> 
        <td class="precio">1300</td> 
        </tr> 
        <tr> 
        <td>Keyboard</td> 
        <td class="precio">300</td> 
        </tr> 
        <tr> 
         <td><b>Total:</b></td> 
         <td class="total_prt"><b>$</b></td> 
        </tr> 
        </tbody> 
      </table> 
<br> 

<table class="table table-striped"> 
       <thead> 
        <tr> 
         <th width="70%">Descripción</th> 
         <th width="20%">Precio</th> 
         </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>HDD</td> 
         <td class="precio">400</td> 
         </tr> 
         <tr> 
         <td>System</td> 
         <td class="precio">425</td> 
         </tr> 
         <tr> 
         <td>Something</td> 
         <td class="precio">350</td> 
         </tr> 
         <tr> 
         <td><b>Total:</b></td> 
         <td class="total_prt"><b>$</b></td> 
        </tr> 
        </tbody> 
      </table> 

Answer 1

我所做的就是通过total元素循环和总求和所有precio元素文本输出。

$('.total_prt').each(function() { 
 
    var sum = 0; 
 
    $(this).parents('table').find('.precio').each(function() { 
 
    var floted = parseFloat($(this).text()); 
 
    if (!isNaN(floted)) sum += floted; 
 
    }); 
 

 
    $(this).html(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th width="70%">Descripción</th> 
 
     <th width="20%">Precio</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Display</td> 
 
     <td class="precio">1300</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Keyboard</td> 
 
     <td class="precio">300</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Total:</b></td> 
 
     <td class="total_prt"><b>$</b></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th width="70%">Descripción</th> 
 
     <th width="20%">Precio</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>HDD</td> 
 
     <td class="precio">400</td> 
 
    </tr> 
 
    <tr> 
 
     <td>System</td> 
 
     <td class="precio">425</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Something</td> 
 
     <td class="precio">350</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Total:</b></td> 
 
     <td class="total_prt"><b>$</b></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

您需要遍历所有表分别和初始化外循环sum的表行，而不是在它里面。

$(document).ready(function() { 
 

 
    $('.table').each(function() { 
 
    var sum = 0 
 
    $(this).find('tr').each(function() { 
 

 

 

 
     $(this).find('.precio').each(function() { 
 
     var precio = $(this).text(); 
 
     if (!isNaN(precio) && precio.length !== 0) { 
 
      sum += parseFloat(precio); 
 
     } 
 
     }); 
 

 
     $('.total_prt', this).html(sum); 
 
    }); 
 
    }) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th width="70%">Descripción</th> 
 
     <th width="20%">Precio</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Display</td> 
 
     <td class="precio">1300</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Keyboard</td> 
 
     <td class="precio">300</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Total:</b></td> 
 
     <td class="total_prt"><b>$</b></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th width="70%">Descripción</th> 
 
     <th width="20%">Precio</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>HDD</td> 
 
     <td class="precio">400</td> 
 
    </tr> 
 
    <tr> 
 
     <td>System</td> 
 
     <td class="precio">425</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Something</td> 
 
     <td class="precio">350</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Total:</b></td> 
 
     <td class="total_prt"><b>$</b></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

你在错误的地方都var sum = 0;和$('.total_prt', this).html(sum) - 你需要将它们移动外的$('tr').each(...)循环。

Answer 4

如果你这样做，它会起作用。

$(document).ready(function() { 
    $('.table').each(function (i, elem) { 
    var totalPrice = 0; 
    $(elem).find("td.precio").each(function(j, elem2) { 
     totalPrice += parseFloat($(elem2).html()); 
    }) 
    $(elem).find(".total_prt").html(totalPrice); 

    }); 
}); 

Answer 5

$('body').find('table').each(function() { 
 
    var sum = 0; 
 
    $(this).find('tr').each(function() { 
 
    $(this).find('td').each(function() { 
 
     if ($(this).hasClass('precio')) { 
 
     var precio = $(this).text(); 
 
     if ($.isNumeric(precio)) { 
 
      sum += parseFloat(precio); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
    $(this).find('td.total_prt').text(sum); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th width="70%">Descripción</th> 
 
     <th width="20%">Precio</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Display</td> 
 
     <td class="precio">1300</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Keyboard</td> 
 
     <td class="precio">300</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Total:</b></td> 
 
     <td class="total_prt"><b>$</b></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th width="70%">Descripción</th> 
 
     <th width="20%">Precio</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>HDD</td> 
 
     <td class="precio">400</td> 
 
    </tr> 
 
    <tr> 
 
     <td>System</td> 
 
     <td class="precio">425</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Something</td> 
 
     <td class="precio">350</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Total:</b></td> 
 
     <td class="total_prt"><b>$</b></td> 
 
    </tr> 
 
    </tbody> 
 
</table>