Add the value of several select in a table with php

Question

Add the value of several select in a table with php

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I have the following table:

With the following code:

    <table>
    <thead>
        <tr>
            <th> Lunes </th>
            <th> Martes </th>
            <th> Miercoles </th>
            <th> Jueves </th>
            <th> Viernes </th>
            <th> Puntos Obtenidos </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <?php for ($i=1; $i <= 5 ; $i++):?>
            <td>
                <select name="puntos" id="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>
            <?php endfor;?>
        <td>
            <!-- Aquí iría el código para calcular los puntos -->
        </td>                           
    </tr>                       
  </tbody>
</table>

I need to show in the last column " Points Obtained " the sum of the points according to the option value selected in each cell.

I tried Jquery but it only stores the value of the first cell.

<script>
    $("#puntos").change(function(){
        var valor = $(this).val();
        console.log(valor);
    });
</script>

jquery html5 php

asked by DjCrazy 16.08.2018 в 00:40

source

2 answers

2

You can not use id to identify the select because the id has to be unique throughout the DOM. You have to use classes. In addition, the value must initialize it to 0 and add all the selected values. Something like this:

$("table .puntos").change(function(){
  var valor = 0;  
  $("table .puntos").each(function(i, punto) {
    if ($.isNumeric(parseInt($(punto).val()))) {
      valor += parseInt($(punto).val());
    }
  });
  $(this).parents('tr').find(".final").html(valor);     
});

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

<table>
    <thead>
        <tr>
            <th> Lunes </th>
            <th> Martes </th>
            <th> Miercoles </th>
            <th> Jueves </th>
            <th> Viernes </th>
            <th> Puntos Obtenidos </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
            <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>
        <td class="final">
            <!-- Aquí iría el código para calcular los puntos -->
        </td>                           
    </tr>                       
  </tbody>
</table>

answered by 16.08.2018 в 00:55

Logica Programming Apply background-color to Input with hexadecimal number stored in database

score 1 · Accepted Answer

You can do it this way, although if there are multiple rows you should consider putting id to each row so that the selector of the function only adds those of its row. Also, in your code you always repeat the same id and that is incorrect:

$("select").change(function(){
 var i=0;
   $(this).closest("tr").find("select").each(function(){
    if ( $(this).val() !== "" )
    i += parseInt($(this).val(), 10);
   });
   $(this).closest("tr").find(".res").val(i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th> Lunes </th>
            <th> Martes </th>
            <th> Miercoles </th>
            <th> Puntos Obtenidos </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select name="puntos" id="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 name="puntos" id="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 name="puntos" id="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>
            <input name="res" class="res" value=''>
            </td>                           
    </tr>                       
        <tr>
            <td>
                <select name="puntos" id="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 name="puntos" id="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 name="puntos" id="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>
            <input name="res" class="res" value=''>
            </td>                           
    </tr>                       
  </tbody>
</table>

Update: Modified the event so that it adds only the values of its row without the need for dynamic ids. Now each row will have an independent sum. Greetings.