1

Eu tenho uma tabela que é gerada automaticamente pelo PHP e manipulada pelo jquery, só que eu preciso calcular o percentual do total de cada uma das linhas numéricas, qual a melhor maneira de fazer isso?

<div id="tableResults" class="container">
  <table id="table_resultados" class="table table-bordered table-hover">
    <thead class="table-head">
      <tr>
        <th>SEX</th>
        <th class="names">FATAL</th>
        <th class="names">SERIOUS</th>
        <th class="names">OTHERS</th>
        <th class="names">TOTAL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>WOMAN</td>
        <td class="VitimaFATAL">4</td>
        <td class="SERIOUS">6</td>
        <td class="OTHERS">1</td>
        <td class="Total">11</td>
      </tr>
      <tr>
        <td>MEN</td>
        <td class="FATAL">18</td>
        <td class="SERIOUS">28</td>
        <td class="OTHERS">23</td>
        <td class="Total">69</td>
      </tr>
      <tr>
        <td>UNKNOWN</td>
        <td class="FATAL">3</td>
        <td class="SERIOUS">1679</td>
        <td class="OTHERS">3129</td>
        <td class="Total">4811</td>
      </tr>
      <tr id="Totais">
        <td>TOTAL</td>
        <td id="FATAL">25</td>
        <td id="SERIOUS">1713</td>
        <td id="OTHERS">3153</td>
        <td id="Total">4891</td>
      </tr>
    </tbody>
  </table>
</div>

Essa tabela vem de uma busca dinâmica no PHP e MYSQL que gera os valores, eu já fiz uma função em jQuery para calcular o total

function colSum() {
    var ids = new Array();
    $('#table_resultados .names').each(function (){   
        ids.push($(this).html().replace(/\s/g, ''));
        $('#Totais').append('<td id="' + $(this).html().replace(/\s/g, '') + '"></td>')
    });

    $.each(ids, function (index, value) {
        var sum = 0;
        $('.' + value).each(function () {
            sum += parseInt($(this).html());
        });

        $('#' + value).html(sum);
    });

Preciso calcular o percentual do total de todos as colunas. Nesse exemplo eu preciso inserir uma coluna após o FATAL, SERIOUS, OUTHERS chamada de % do total e com os valores, exemplo:

  • a coluna % do total do FATAL seria 36,36 - 26,08 - 0,06 - 0,51
  • a coluna % do total do SERIOUS seria 54,54 - 40,57 - 34,89 - 35,02

A conta a ser feita é o valor da coluna multiplicado por 100 dividido pelo valor do total da mesma linha exemplo da primeira linha 4*100/11

Criei um HTML para ficar mais ou menos como eu preciso, nao sei como gerar isso dinamicamente para todas as linhas

<div id="tableResults" class="container">
  <table id="table_resultados" class="table table-bordered table-hover">
    <thead class="table-head">
      <tr>
        <th>SEX</th>
        <th class="names">FATAL</th>
        <th>% do TOTAL</th>
        <th class="names">SERIOUS</th>
        <th class="names">OTHERS</th>
        <th class="names">TOTAL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>WOMAN</td>
        <td class="VitimaFATAL">4</td>
        <th>36,36</th>
        <td class="SERIOUS">6</td>
        <td class="OTHERS">1</td>
        <td class="Total">11</td>
      </tr>
      <tr>
        <td>MEN</td>
        <td class="FATAL">18</td>
        <th>26,08</th>
        <td class="SERIOUS">28</td>
        <td class="OTHERS">23</td>
        <td class="Total">69</td>
      </tr>
      <tr>
        <td>UNKNOWN</td>
        <td class="FATAL">3</td>
        <th>0,06</th>
        <td class="SERIOUS">1679</td>
        <td class="OTHERS">3129</td>
        <td class="Total">4811</td>
      </tr>
      <tr id="Totais">
        <td>TOTAL</td>
        <td id="FATAL">25</td>
        <th>0,51</th>
        <td id="SERIOUS">1713</td>
        <td id="OTHERS">3153</td>
        <td id="Total">4891</td>
      </tr>
    </tbody>
  </table>
</div>

9
  • Não dá para vc colocar o HTML já com as colunas % do total, tá meio confuso, pelo menos pra mim, entender.
    – user60252
    Commented 25/04/2017 às 14:46
  • Me explica uma coisa, de onde você tirou esse valores? a coluna % do total do FATAL seria 36,36 - 26,08 - 0,06 - 0,51 e a coluna % do total do SERIOUS seria 54,54 - 40,57 - 34,89 - 35,02. Consegui entender que você queria pegar os valores que estam nas colunas e agrupar pelas classes: FATAL,SERIOUS,OTHERS;
    – Marconi
    Commented 25/04/2017 às 14:46
  • @Marconi Eu fiz na calculadora Commented 25/04/2017 às 14:47
  • @GuilhermeFreire qual o calculo pra chegar nesses percentuais? Poderia editar sua pergunta e adicionar mais alguma coisa?
    – Marconi
    Commented 25/04/2017 às 14:48
  • @Marconi A conta a ser feita é o valor da coluna multiplicado por 100 dividido pelo valor do total da mesma linha exemplo da primeira linha 4*100/11 so que eu nao sei como fazer isso dinamicamente pelo jquery em todas as linhas Commented 25/04/2017 às 14:56

2 Respostas 2

2

Irei adicionar a minha resposta com a premissa que a sua função para adicionar o valor total está correta, então utilizarei o HTML postado em sua resposta, já com o total, como base.

Não irei utilizar o nome de classe ou id's, que seria mais simples. Irei fazer de uma forma um pouco mais genérica.

Primeiro, eu adiciono a coluna de porcentagem após cada coluna. Em conjunto, eu salvo o index() da coluna, para saber a sua real posição.

var indexs = new Array();
$('table#table_resultados thead tr th.names').each(function() {
  var coluna = $(this); // Salvo a coluna atual
  indexs.push(coluna.index()); //Salvo o Index
  coluna.after('<th>%</th>'); // Insiro a nova coluna
});

Após salvar os index's e já ter inserido as colunas para as porcentagens, eu percorro cada linha para obter o valor da coluna total. Após obter o valor da coluna total, eu percorro os index's salvos, buscando o valor de cada coluna e a sua respectiva porcentagem.

Após ter todos esses dados, eu apenas insiro o valor na linha e coluna específica.

$('table#table_resultados tbody tr').each(function() {
  var coluna = $(this); //Salvo a coluna
  //console.log(coluna)
  var total = parseFloat(coluna.find('td').last().html()); // Salvo o valor total da linha
  $(indexs).each(function(key, value) { // Percorro os index's salvos
    var row = coluna.find('td').eq(value); // Salvo a linha 
    var valor = parseFloat(row.html()); // Salvo o valor total da linha
    var procentagem = (valor / total) * 100; // Verifico a porgentagem
    row.after('<td>' + procentagem.toFixed(3) + '</td>'); // Adiciono o valor na linha e na coluna porcentagem
  });
});

Abaixo você pode verificar o exemplo funcional.

var indexs = new Array();
$('table#table_resultados thead tr th.names').each(function() {
  var coluna = $(this); // Salvo a coluna atual
  indexs.push(coluna.index()); //Salvo o Index
  coluna.after('<th>%</th>'); // Insiro a nova coluna
});

$('table#table_resultados tbody tr').each(function() {
  var coluna = $(this); //Salvo a coluna
  var total = parseFloat(coluna.find('td').last().html()); // Salvo o valor total da linha
  $(indexs).each(function(key, value) { // Percorro os index's salvos
    var row = coluna.find('td').eq(value); // Salvo a linha 
    var valor = parseFloat(row.html()); // Salvo o valor total da linha
    var procentagem = (valor / total) * 100; // Verifico a porgentagem
    row.after('<td>' + procentagem.toFixed(3) + '</td>'); // Adiciono o valor na linha e na coluna porcentagem
  });
});
th {
  width: 150px;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tableResults" class="container">
  <table id="table_resultados" class="table table-bordered table-hover">
    <thead class="table-head">
      <tr>
        <th>SEX</th>
        <th class="names">FATAL</th>
        <th class="names">SERIOUS</th>
        <th class="names">OTHERS</th>
        <th>TOTAL</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>WOMAN</td>
        <td class="FATAL">4</td>
        <td class="SERIOUS">6</td>
        <td class="OTHERS">1</td>
        <td class="Total">11</td>
      </tr>
      <tr>
        <td>MEN</td>
        <td class="FATAL">18</td>
        <td class="SERIOUS">28</td>
        <td class="OTHERS">23</td>
        <td class="Total">69</td>
      </tr>
      <tr>
        <td>UNKNOWN</td>
        <td class="FATAL">3</td>
        <td class="SERIOUS">1679</td>
        <td class="OTHERS">3129</td>
        <td class="Total">4811</td>
      </tr>
      <tr id="Totais">
        <td>TOTAL</td>
        <td id="FATAL">25</td>
        <td id="SERIOUS">1713</td>
        <td id="OTHERS">3153</td>
        <td id="Total">4891</td>
      </tr>
    </tbody>
  </table>
</div>

1
  • 1
    muitíssimo obrigado pela sua ajuda, eu nao sabia como pegar a coluna dessa maneira que você fez ficou perfeito, aprendi muito mesmo agora Commented 25/04/2017 às 17:18
1

A pedido do autor da pergunta conforme comentário

Calcular percentual do total de colunas com PHP

Como não tenho o arquivo CSS fiz da forma mais trivial.

$db = new PDO('mysql:host=localhost;dbname=DBname;charset=utf8mb4', 'USUARIO', 'SENHA');


echo "<div align=\"center\" id=\"tableResults\" class=\"container\">
  <table id=\"table_resultados\" width=\"800\" class=\"table table-bordered table-hover\">
    <thead class=\"table-head\">
     <tr>
      <th>SEX</th>
      <th class=\"names\">FATAL</th>
      <th>% do TOTAL</th>
      <th class=\"names\">SERIOUS</th>
      <th>% do TOTAL</th>
      <th class=\"names\">OTHERS</th>
      <th>% do TOTAL</th>
      <th class=\"names\">TOTAL</th>
    </tr>
   </thead>
  <tbody>";

    foreach($db->query('SELECT * FROM NomeTabela') as $row) {

       $nome=$row["nome"];
                
       if ($nome=="WOMAN"){
            $classe="VitimaFATAL";
        }else{
            $classe="FATAL";
        }
                
        $fatal=$row["fatal"];
        $serious=$row["serious"];
        $others=$row["others"];
        $total=$row["fatal"]+$row["serious"]+$row["others"];
                
        echo "<tr>
              <td align=\"center\" width=\"150\">".$row["nome"]."</td>
              <td align=\"center\" width=\"50\" class=\"".$classe."\">".$fatal."</td>
              <th align=\"center\" width=\"150\">".number_format(($fatal*100)/$total,2, '.', '')."</th>
              <td align=\"center\" width=\"50\" class=\"SERIOUS\">".$serious."</td>
              <th align=\"center\" width=\"150\">".number_format(($serious*100)/$total,2, '.', '')."</th>
              <td align=\"center\" width=\"50\" class=\"OTHERS\">".$others."</td>
              <th align=\"center\" width=\"150\">".number_format(($others*100)/$total,2, '.', '')."</th>
              <td align=\"center\" width=\"50\" class=\"Total\">".$total."</td>
              </tr>";
        }


  echo "</tbody>
 </table>
</div>";

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .