Count values in columns of an html table

2

I have the following table:

I'm looking for a way to count the number of times the positive and negative numbers appear for each column, for example: Black appears 1 time in the first column, 2 times in the second column and 0 in the third column (black) it is the only color that has negative value).

The code I have so far is the following:

<table class="table table-bordered table-hover" id="miTabla">
                <thead>
                    <tr>
                        <th> Nombre </th>
                        <th> Lunes </th>
                        <th> Martes </th>
                        <th> Miercoles </th>
                        <th> Jueves </th>
                        <th> Viernes </th>
                        <th> Puntaje Obtenido </th>
                        <th> Puntaje Acumulado </th>
                        <th> Puntaje Nuevo </th>
                    </tr>
                </thead>
                <!-- Número de filas según la cantidad de usuarios activos -->

                <tbody>
                    <?php while ($row = $query1 -> fetch_array()):?>
                        <tr id="<?= $row['id']; ?>">
                            <td><?= $row["nombre"]; ?></td>
                            <!-- Número de columnas = 5 -->
                            <?php for ($i=1; $i<=5 ; $i++):?>
                                <td>
                                    <select name="puntos" id="puntos" required>
                                        <option value=""></option>
                                        <!-- Listado de puntos por color traído de MySQL -->
                                        <?php                                                           
                                            while ($valor = $query2 -> fetch_array()) {
                                                $lista.= "<option value='".$valor['puntos']."'>".$valor['color']."</option>";
                                            }
                                            echo $lista;
                                        ?>
                                    </select>
                                </td>
                            <?php endfor;?>
                            <td>
                                <!-- Puntaje Obtenido (suma de puntos de toda la fila) -->
                                <input class="obtenido" name="obtenido" value="" readonly>
                            </td>
                            <td>
                                <!-- Puntaje Acumulado traído de MySQL -->
                                <input class="acumulado" name="acumulado" value="<?= $row["acumulado"]; ?>" readonly>
                            </td>
                            <td>
                                <!-- Puntaje Obtenido + Puntaje Acumulado -->
                                <input class="nuevo" name="nuevo" value="" readonly>
                            </td>                           
                        </tr>
                        <script>
                            /*Puntaje Obtenido y Puntaje Nuevo*/
                            $("select").change(function(){                                  
                                var i=0;
                                $(this).closest("tr").find("select").each(function(){
                                    if ( $(this).val() !== "" )
                                    i += parseInt($(this).val(), 10);
                                    j = parseInt($(this).closest("tr").find(".acumulado").val()) + parseInt(i);
                                });
                                $(this).closest("tr").find(".obtenido").val(i);
                                $(this).closest("tr").find(".nuevo").val(j);
                            });
                        </script>
                    <?php endwhile;?>
                        <tr>
                            <td>Colores Positivos</td>
                            <?php for ($i=1; $i<=5 ; $i++):?>
                                <td>
                                    <input class="positivos" type="" name="" style="width: 80px;">                                  
                                </td>
                            <?php endfor;?>                         
                        </tr>
                        <tr>
                            <td>Colores Negativos</td>
                            <?php for ($i=1; $i<=5 ; $i++):?>
                                <td>
                                    <input class="negativos" type="" name="" style="width: 80px;">                                  
                                </td>
                            <?php endfor;?>                             
                        </tr>
                </tbody>
            </table>

Note: The number of rows changes according to the number of registered users in the database and the number of columns may vary.

    
asked by DjCrazy 25.09.2018 в 16:00
source

1 answer

2

Here's an example of how to do it:

$("table .puntos").change(function() {  
  var positivo = 0;  
  var negativo = 0;
  var index = $(this).parents('tr').find('select').index(this);
  $("table tbody tr").each(function(i, row) {
    var select = $(row).find('td').eq(index + 1).find('select');
    if(select[0]) {
      var text = $(row).find('td').eq(index + 1).find('select option:selected').text();
      if ($.isNumeric(parseInt($(select).val()))) {              
        if (text != 'Negro') {
          positivo++;
        } else {
          negativo++;
        }
      }
    } else {
      return false;
    }    
  });
  $('.positivos').eq(index).val(positivo); 
  $('.negativos').eq(index).val(negativo);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
    <thead>
        <tr>
            <th> Nombre </th>
            <th> Lunes </th>
            <th> Martes </th>
            <th> Miercoles </th>
            <th> Jueves </th>
            <th> Viernes </th>
            <th> Puntos Obtenidos </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
                                  
    </tr>  
    <tr>
            <td></td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
            <td>
                <select class="puntos" required>
                <option value=""></option>
                <option value='12'>Verde</option>
                <option value='8'>Azul</option>
                <option value='6'>Amarillo</option>
                <option value='0'>Rojo</option>
                <option value='-8'>Negro</option>
                </select>
            </td>
                                  
    </tr>  
    <tr>
            <td>Colores Positivos</td>
            <td><input class="positivos" type="" name="" style="width: 80px;"></td>
            <td><input class="positivos" type="" name="" style="width: 80px;"></td>
            <td><input class="positivos" type="" name="" style="width: 80px;"></td>
            <td><input class="positivos" type="" name="" style="width: 80px;"></td>
            <td><input class="positivos" type="" name="" style="width: 80px;"></td>
    </tr>
    <tr>
            <td>Colores Negativos</td>
            <td><input class="negativos" type="" name="" style="width: 80px;"></td>
            <td><input class="negativos" type="" name="" style="width: 80px;"></td>
            <td><input class="negativos" type="" name="" style="width: 80px;"></td>
            <td><input class="negativos" type="" name="" style="width: 80px;"></td>
            <td><input class="negativos" type="" name="" style="width: 80px;"></td>
    </tr>
  </tbody>
</table>
    
answered by 25.09.2018 / 17:05
source