JSFiddle - React, Tailwind, and code Playground

by rvaldez

HTML

<form action="" id="form">
    <table id="consumo">
        <thead>
            <tr>
                <th>Semana</th>
                <th colspan="7">Consumo de alimento diario</th>
                <th rowspan="2">Total Semana</th>
                <th rowspan="2">Acumulado</th>
                <th rowspan="2">Consumo Diario</th>
                <th rowspan="2">Consumo por pollo semana</th>
                <th rowspan="2">Consumo Acumulado</th>
            </tr>
            <tr>
                <td></td>
                <td>Lunes</td>
                <td>Martes</td>
                <td>Miércoles</td>
                <td>Jueves</td>
                <td>Viernes</td>
                <td>Sábado</td>
                <td>Domingo</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</form>

JavaScript

$(document).ready(function(){
    build_consumo();
    $("#consumo").on("keyup", "input", calcular);

});

function calcular() {
    var sum = 0;
    var total =  $(this).parent().parent().find('input[id^=tot_sem]');
    $(this).parent().parent().find('.con_sem').each(function (i) {

        sum+= +$(this).val() || 0 ;

    });
    total.val(sum);

}


function build_consumo(){
    for (var i = 1; i <= 8; i++){        
            $("<tr>"
            + "<td>"+i+"</td>" 
            + "<td><input class='con_sem' name='con_lun[]' type='text'  size='6' required></td>"
            + "<td><input class='con_sem' name='con_mar[]' type='text'  size='6' required></td>"
            + "<td><input class='con_sem' name='con_mie[]' type='text'  size='6' required></td>"
            + "<td><input class='con_sem' name='con_jue[]' type='text'  size='6' required></td>"
            + "<td><input class='con_sem' name='con_vie[]' type='text'  size='6' required></td>"
            + "<td><input class='con_sem' name='con_sab[]' type='text'  size='6' required></td>"
            + "<td><input class='con_sem" + (i+1) + "' name='con_dom[]' type='text'  size='6' required></td>"
            + "<td><input id='tot_sem_" + (i+1) + "' disabled='disabled' size='7'></td>"
            + "<td><input id='acum_sem_" + (i+1) + "' disabled='disabled' size='7'></td>"
            + "<td><input id='con_diario_sem_" + (i+1) + "' disabled='disabled' size='7'></td>"
            + "<td><input id='con_x_pollo_sem_" + (i+1) + "' disabled='disabled' size='7'></td>"
            + "<td><input id='con_acum_sem_" + (i+1) + "' disabled='disabled' size='7'></td>"
            + "</tr>").appendTo("#consumo tbody");        
    }
}