JSFiddle - React, Tailwind, and code Playground

by fmdataweb

HTML

<table width="300px" border="1" id="fruits"">
   <tr>
    <th colspan="5">Fruit Selections</th>
   </tr>
        
  <tr class="header">
    <td width="100">Row</td>
    <td width="100">Fruit</td>
    <td width="100">Number</td>
    <td width="100">Weeks</td>
    <td width="100">Average Per Week</td>
  </tr>
        
        <tr>
            <td width="40px" class="title">
                1
            </td>
            <td class="fruit">
                <select>
                <option></option>
                <option>Apple</option>
                <option>Banana</option>
                <option>Mango</option>
              </select>

            </td>
            <td><input class="qty" type="text" name="txt" value=""/>
            </td>
            <td><input class="weeks" type="text" name="txt" value=""/>
            </td>
            <td><input class="average" type="text" name="txt" value=""/>
            </td>
        </tr>
        <tr>
            <td class="title">
                2
            </td>
            <td class="fruit">
                <select>
                <option></option>
                <option>Apple</option>
                <option>Banana</option>
                <option>Mango</option>
              </select>
            </td>
            <td><input class="qty" type="text" name="txt" value=""/>
            </td>
            <td><input class="weeks" type="text" name="txt" value=""/>
            </td>
            <td><input class="average" type="text" name="txt" value=""/>
            </td>
        </tr>
        <tr>
            <td class="title">
                3
            </td>
            <td class="fruit">
                <select>
                <option></option>
                <option>Apple</option>
                <option>Banana</option>
                <option>Mango</option>
              </select>
            </td>
            <td><input class="qty" type="text" name="txt" value=""/>
            </td>
            <td><input...

CSS

#fruits tr.header {
     background-color:#c0c0c0;
     }
     #fruits th, #fruits td {
    padding: 3px;
    }
    #fruits th {
    background-color:#006699;
    color: #FFF;
    }

JavaScript

//Sum Table Cell and Map


     $('#fruits')
        .on('change', 'select', calc)
        .on('keyup', 'input', calc);
    

    
    function calc(){
   
        $('#fruits tr:has(.fruit)').each(function(i,v){
            
            var $cel = $(v.cells);
            
            var $fruit = $cel.eq(1).find('option:selected').val();
            var $numb = $cel.eq(2).find('input').val();
            var $weeks = $cel.eq(3).find('input').val();
            var $avg = ($numb * $weeks) / 52;
            
            $cel.eq(4).find('input').val($avg);

        });   
 
        var tot = {};
        
        $('#fruits tr:has(.fruit) option:selected')
                    .map(function(i){
                        var el = $(this).val();
                        var qty = parseFloat($('#fruits tr:has(.fruit)').eq(i).find('td:last input').val());
                        if (!tot.hasOwnProperty(el)) {
                            tot[el] = 0;            
                        }
                        tot[el] += qty
                        return tot;
                    }).get();
       
        //console.log(tot);
        $('#sumApple').text(tot.Apple);
        $('#sumBanana').text(tot.Banana);
        $('#sumMango').text(tot.Mango);
        
    }