<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <div class="container">
        <div class="row">

        </div>
    </div>
    <script src="assets/js/polyfills.js"></script>
    <script src="assets/dist/bundle.js"></script>
</body>

</html>

tr{
  margin: 10px 0;
}

td{
  text-align: center;
  cursor: pointer;
  padding: 5px;
  border: 1px black solid;
}

.row_sum{
  background: #3F51B5;
  color: #fff;
}
  
const helperFunctions = {
    randomInt: function () {
        return parseInt(Math.floor(100 + Math.random() * 900));
    },
    add: function (a,b) {
        return a+b;
    }
};

let TableConstructor = {

    increment: 0,

    init(rows,columns){
        this.rows = rows;
        this.columns = columns;
        this.matrix = this.generateMatrix();
    },
    generateMatrix(){
        let arr = [];
        for(let i=0; i<this.rows; i++){
            arr[i] = [];
            for(let j=0; j<this.columns; j++){
                arr[i][j] = {id: this.increment++, amount: helperFunctions.randomInt()};
            }
        }
        return arr;
    },

    drawTable(table){
        let tableContainer = document.getElementsByClassName('row')[0];
        let tableRow;
        let tableData;
        let row, col;
        this.drawnTable = document.createElement('table');

        this.drawnTable.className = 'table';

        for (row = 0; row < table.length; row++){
            tableRow = document.createElement('tr');
            for (col = 0; col < table[row].length; col++){
                tableData = document.createElement('td');
                tableData.id = table[row][col].id;
                tableData.innerHTML = table[row][col].amount;
                tableRow.appendChild(tableData);
            }
            this.drawnTable.appendChild(tableRow);
        }
        tableContainer.appendChild(this.drawnTable);
        this.calculateRowSum();
        this.calculateColumnMid();

    },

    calculateRowSum(){
       let tableRows = [...this.drawnTable.getElementsByTagName('tr')];

       for(let i = 0; i<tableRows.length; i++){
           let oneRowTd = [...tableRows[i].querySelectorAll('td')];

           let oneRowTdValues = oneRowTd.map(td=>parseInt(td.innerHTML));
           let oneRowSum = oneRowTdValues.reduce(helperFunctions.add, 0 );
           let rowSumTd = tableRows[i].insertCell(oneRowTd.length);
           rowSumTd.innerHTML = oneRowSum;
           rowSumTd.className = 'row_sum';
       }
    },

    calculateColumnMid(){
        let columnValues = {};
        let tableRows = [...this.drawnTable.getElementsByTagName('tr')];
        for(let i = 0; i<tableRows.length; i++){
            let oneRowTd = [...tableRows[i].querySelectorAll('td')];
            oneRowTd.map((i)=>{
                if(i.className!='row_sum'){
                    console.log(i);
                }
            });
        }
        console.log(columnValues);
    }

};

TableConstructor.init(3, 3);

TableConstructor.drawTable(TableConstructor.matrix);

function addToCell(e) {
    if(e.target.id){
        //console.log(e.target.cellIndex);
        let clickedRow = document.getElementById(e.target.id).closest('tr');
        let clickedRowSum = clickedRow.getElementsByClassName('row_sum')[0];
        clickedRowSum.innerHTML = parseInt(clickedRowSum.innerHTML) + 1;
        e.target.innerHTML = parseInt(e.target.innerHTML) + 1;
    }
}

let events = {
    addCellHandler: function () {
        let allTd = [...document.querySelectorAll('td')];
        for(let i=0; i<allTd.length; i++){
            allTd[i].addEventListener('click', addToCell)
        }
    }
};

events.addCellHandler();
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.