Calculate the total of a column table based on the checkbox picking only the selected ones

Navigation
0

I have the following table: 

  <div class="table-responsive">
    <form class="form-inline" action="registrosVazios.php" method="GET">
      <table id="tabelaCupons" class="table table-condensed table-bordered table-striped" border="1px" bordercolor="#000000">
        <thead>

          <tr>
            <th style="text-align:center;width: 10px">
              <input type="checkbox" name="chkAll" onClick="checkAll(this)" />
            </th>
            <th style="text-align:center;vertical-align:middle;">
              DATA
            </th>
            <th style="text-align:center;vertical-align:middle;">
              PDV
            </th>
            <th style="text-align:center;vertical-align:middle;">
              CUPOM
            </th>
            <th style="text-align:center;vertical-align:middle;">
              VALOR
            </th>
          </tr>
        </thead>
        <tbody>
          <?php 
          if (mysqli_num_rows($resultImportaPdv) > 0) {
            while($row = mysqli_fetch_assoc($resultImportaPdv)) { ?>       
            <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' id='<?php echo $row["ie_cupom"]; ?>' name='<?php echo $row["ie_cupom"]; ?>' value='<?php echo $row["ie_cupom"]; ?>' onClick="verCheck()" >
              </td>
              <td  style="height:5px;text-align:center;">
                <?php echo date_format (new DateTime($row["ie_data"]), 'd/m/Y'); ?>
              </td>
              <td  style="height:5px;text-align:center;">
                <?php echo $row["ie_pdv"]; ?>
              </td>
              <td  style="height:5px;text-align:center;">
                <?php echo $row["ie_cupom"]; ?>
              </td>
              <td style="height:5px;text-align:center;">
                <?php echo round($row["ie_valor"],2); ?>
              </td>
            </tr>
          </div>
        </div>
        <?php 
      }
    } else {
      echo "0 registros";
    }
    ?>
  </tbody>
</table>

It looks like this:

WhatIneed,whenIcheckboxit,computesthetotalofthevaluecolumn

<tdstyle="height:5px;text-align:center;">
                    <?php echo round($row["ie_valor"],2); ?>
                  </td>

Only those who are checked.

Someone knows how I can do it, remembering that the name of the checkbox may be different, and I need to keep it that way.

Expected end result:

    
asked by anonymous 19.01.2018 / 14:37

1 answer

0

To facilitate the process I chose to add the class check in the checkbox and a class total in the total columns.

For each checkbox the logic to apply is:

  • Set event change
  • In this event fetch all selected checkboxes at the expense of the .check:checked
  • For each checkbox found, navigate to the total using closest and querySelector
  • Interpret the value with parseFloat and add it to the total
  • Show total if checked checkboxes or 0 otherwise

Implementation: 

const checks = document.querySelectorAll(".check");
const divtotal = document.getElementById("total");

for (let i = 0; i < checks.length; ++i){ //para cada checkbox
  checks[i].addEventListener("change", function(){//definir código para o evento change
    //buscar só os checks selecionados
    const checksSelecionados = document.querySelectorAll(".check:checked");
    let total = 0;
    
    if (checksSelecionados.length == 0){ //se não tiver nenhum mostra total 0
      divtotal.innerHTML = "Total :" + total.toFixed(2);
    }
    else {
      checksSelecionados.forEach(c => { //para cada check selecionado
        let trValor = c.closest("tr").querySelector(".valor"); //achar o tr com o valor
        total += parseFloat(trValor.innerHTML);//transformar em numero e somar ao total
        divtotal.innerHTML = "Total :" + total.toFixed(2);
      });
    }
  });
}
<div class="table-responsive">
    <form class="form-inline" action="registrosVazios.php" method="GET">
      <table id="tabelaCupons" class="table table-condensed table-bordered table-striped" border="1px" bordercolor="#000000">
        <thead>

          <tr>
            <th style="text-align:center;width: 10px">
              <input type="checkbox" name="chkAll" />
            </th>
            <th style="text-align:center;vertical-align:middle;">
              DATA
            </th>
            <th style="text-align:center;vertical-align:middle;">
              PDV
            </th>
            <th style="text-align:center;vertical-align:middle;">
              CUPOM
            </th>
            <th style="text-align:center;vertical-align:middle;">
              VALOR
            </th>
          </tr>
        </thead>
        <tbody>
         
            <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                15.50
              </td>
            </tr>
            
             <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                39.12
              </td>
            </tr>
            
             <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                4.70
              </td>
            </tr>
            
             <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                2.78
              </td>
            </tr>

        
  </tbody>
</table>
<br>
<div id="total"></div>

Documentation:

19.01.2018 / 15:58
Doubt overriding default php.ini definitions Slider problem with jsonArrayRequest Vollay Attempt to invoke virtual method