JSFiddle - React, Tailwind, and code Playground

by Mossa Barandao

HTML

<table id="sum_table" width="300" border="1">
    <tbody>
    <tr class="titlerow">
        <td>Apple</td>
        <td>Orange</td>
        <td>Watermelon</td>
        <td>Strawberry</td>
        <td>Total By Row</td>
    </tr>
    <tr>
        <td class="rowAA">1</td>
        <td class="rowAA">0</td>
        <td class="rowBB">3</td>
        <td class="rowBB">4</td>
        <td class="totalRow"></td>
    </tr>
    <tr>
        <td class="rowAA">1</td>
        <td class="rowAA">2</td>
        <td class="rowBB">3</td>
        <td class="rowBB">4</td>
        <td class="totalRow"></td>
    </tr>
    <tr>
        <td class="rowAA">1</td>
        <td class="rowAA">5</td>
        <td class="rowBB">10</td>
        <td class="rowBB">4</td>
        <td class="totalRow"></td>
    </tr>
     <tr>
        <td class="rowAA">1</td>
        <td class="rowAA">1</td>
        <td class="rowBB">3</td>
        <td class="rowBB">4</td>
        <td class="totalRow"></td>
    </tr>
    <tr class="totalColumn">
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
        <td class="totalCol">Total:</td>
    </tr>
    </tbody>
</table>

JavaScript

var ttl_r = $("#sum_table >tbody >tr:not('.totalColumn, .titlerow')").length;
var ttl_col = $("#sum_table >tbody >tr:not('.totalColumn, .titlerow')").length;
//var arr = Array(ttl_col).fill(0);


alert(ttl_r+" - Rows  | "+  ttl_col+ " - Columns ");

var totalsByRow = Array(ttl_r).fill(0);//[0, 0, 0, 0, 0];
var totalsByCol = Array(ttl_col).fill(0);//[0, 0, 0, 0, 0];
//alert(totalsByCol);
$(document).ready(function() {

    var $dataRows = $("#sum_table tr:not('.totalColumn, .titlerow')");

    $dataRows.each(function(i) {
        $(this).find('td:not(.totalRow)').each(function(j) {
            totalsByCol[j] += parseInt($(this).html());
            totalsByRow[i] += parseInt($(this).html());
        });
    });
    
    for (var i = 0; i < totalsByCol.length - 1; i++) {
        totalsByCol[totalsByCol.length - 1] += totalsByCol[i];       
    }    

    $("#sum_table td.totalCol").each(function(i) {
        $(this).html("total:" + totalsByCol[i]);
    });

    $("#sum_table td.totalRow").each(function(i) {
        $(this).html("total:" + totalsByRow[i]);
    });
});
$(function(){
//get row and column indexes    
$("#sum_table tr").click(function(e){
    alert("Row: "+(this.rowIndex)+", Column: "+(e.toElement.cellIndex));
});
});