Hola buenos días¡¡¡ estoy realzando una tabla en html la cual cuenta con un botón agregar el cual al darle "clic" aparece un renglón nuevo vacío para que el usuario lo llene, mi pregunta es como se pueden sumar la cantidades de las columnas y que se genere otro renglón con el total al final
<!DOCTYPE html>
<html lang="es">
<head>
<title>HTML to PDF</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script>
$(document).ready(function(){
$('#bt_add').click(function(){
agregar();
});
});
var cont=0;
var id_fila_selected=[];
function agregar(){
cont++;
var fila='<tr contenteditable="true" id="fila" onclick="seleccionar(this.id);"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
$('#tabla').append(fila);
reordenar();
}
</script>
</head>
<body >
<div id="HTMLtoPDF">
<div class="container">
<div class="row justify-content-around">
<div class="card-header text-center font-size:20% text-uppercase py-4" style="background: none">
<h2 >PAGOS BANCARIOS</h2>
</div>
</div>
<div id="content">
<table id="tabla" class="table table-bordered" >
<thead>
<tr>
<td>RPE</td>
<td>DIA DEPOSITO</td>
<td>CARGA EN SICOM</td>
<td>$ BANCO DE REFERENCIA</td>
<td>$ CHEQUE</td>
<td>$ TERMINAL CAC</td>
<td>TIPO DE PAGO</td>
<td>BANCO</td>
<td>REFERENCIA/APROBACION</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
<!-- here we call the function that makes PDF -->
<div class="container">
<div class="row">
<div class="col-sm-3 align-self-center">
<button id="bt_add" class="btn btn-default">Agregar</button>
</div>
<div class="col-sm-3 align-self-center">
<button id="bt_add" class="btn btn-default">Calcular</button>
</div>
<div class="col-sm-3 align-self-center">
<button class="btn btn-default" onclick="HTMLtoPDF()">Download PDF</button>
</div>
<form action="guardarArchivos.php" method="post" enctype="multipart/form-data">
<div class="col-sm-3 align-self-center">
<button class="btn btn-default" name="boton_guarda" value="Guardar en disco" onclick="javascript:document.execCommand('SaveAs','true','tu_archivo.txt')">Guardar</button>
</div>
</form>
</div>
</div>
<!-- these js files are used for making PDF -->
<script src="js/jspdf.js"></script>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/pdfFromHTML.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>