JSFiddle - React, Tailwind, and code Playground

by rexable

HTML

<table>
    <tr>
        <th>\</th><th>金</th><th>木</th><th>水</th><th>火</th><th>土</th>
    </tr>
    <tr>
        <th>1</th>
        <td>
            <select>
                <option value='0'>0</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
        </td>
        <td>
            <select>
                <option value='0'>0</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
        </td>
        <td>
            <select>
                <option value='0'>0</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
        </td>
        <td>
            <select>
                <option value='0'>0</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
        </td>
        <td>
            <select>
                <option value='0'>0</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>2</th>
        <td>
            <select>
                <option value='0'>0</option>
                <option value='1'>1</option>
                <option value='2'>2</option>
                <option value='3'>3</option>
                <option value='4'>4</option>
            </select>
        </td>
        <td>
            <select>
                <option...

CSS

th {
    background-color: aqua;
}
td {
    border: 1px solid green;
}
td, th {
    width: 15px;
    height: 15px;
}

JavaScript

$('td select').change(function(){
   var amount = $('#info .amount'),
       level = $('#info .level'),
       tabledata = $('td select'),
       num = 0, sum = 0;
   for ( i = 0; i < tabledata.length; i++ ){
       v = parseInt(tabledata.eq(i).val());
       l = parseInt(tabledata.eq(i).parent().parent().data('level'));
       num += v;
       sum += (v * l);
   }
   amount.text(num);
   level.text(sum); 
});

$('tr').each(function(i){
    $(this).data('level', i);
});