Adding Column Total

Jayfromsandiego · January 23, 2019

I recently came across this youtube video below on CRUD W/Javascript ..

I modified the code into a horse racing app and want to know how to implement a feature that calculates the Profit / Loss column total. The Profit / Loss across column total would be calculated from row columns (Amount Won minus Investment Wager). Then the running total would be calculated vertically by adding all the rows in that Profit / Loss column until you hit the bottom yellow highlighted text box.

Please see the attached image, shown as yellow highlighted text box with the total showing as $0 balance, which should be $4. Obviously this amount is incorrect and this is the problem I have been trying to correct for 2 weeks or so now. Been applying many different approaches, but I can't seem to figure it out and its driving me nuts. Its one thing to be able to add all the sums but trying to come up with a way to incur the negative loss values is proving difficult to me. Can someone please help?

Edited January 23, 2019 by Jayfromsandiego

Jayfromsandiego · January 23, 2019

index.html

<!DOCTYPE html>
<html>
<head>
<title>Html CRUD with Pure JavaScript</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div align="left">
<span style="font-family: verdana,arial,helvetica; font-size: font-weight: bold; 15px; color: #FF0000;">Horse Racing</span> - <span style="font-family: verdana,arial,helvetica; font-size: font-weight: bold; 15px; color: #808080;">APP</span></div>
<div> </div>
<div style="overflow-x:auto;">
<table bgcolor="#F5F5F5">
<tr>
<td>
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div>
<label>Date*</label><label class="validation-error hide" id="colDateValidationError">This field is required.</label>
<input type="text" name="colDate" id="colDate">
</div>
<div>
<label>Play List</label>
<input type="text" name="colPlaylist" id="colPlaylist">
</div>
<div>
<label>Winning Numbers</label>
<input type="text" name="colWinningnumbers" id="colWinningnumbers">
</div>
<div>
<label>Won or Lost</label>
<input type="text" name="colWonlost" id="colWonlost">
</div>
<div>
<label>Amount Won</label>
<input type="text" name="colAmountwon" id="colAmountwon">
</div>
<div>
<label>Investment Wager</label>
<input type="text" name="colWager" id="colWager">
</div>
<div>
<label>Profit / Loss</label>
<input type="text" name="colProfitloss" id="colProfitloss">
</div>
<div class="form-action-buttons">
<input type="submit" value="Submit">
</div>
</form>
</td>
<td>
<table class="list" id="numberList">
<thead>
<tr>
<th>Date</th>
<th>Play List</th>
<th>Winning Numbers</th>
<th>Won or Lost</th>
<th>Amount Won</th>
<th>Investment Wager</th>
<th>Profit / Loss</th>
<th></th>
</tr>
</thead>
<tbody>

</tbody>
<tr>
<td bgcolor="#FF0000"><span style="font-family: verdana,arial,helvetica; font-size: 12px; color: #FFFFFF;">TOTAL:</span></td>
<td colspan="5"> </td>
<td bgcolor="#FFFF99"> $0</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>

script.js

var selectedRow = null

function onFormSubmit() {
if (validate()) {
var formData = readFormData();
if (selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData);
resetForm();
}
}

function readFormData() {
var formData = {};
formData["colDate"] = document.getElementById("colDate").value;
formData["colPlaylist"] = document.getElementById("colPlaylist").value;
formData["colWinningnumbers"] = document.getElementById("colWinningnumbers").value;
formData["colWonlost"] = document.getElementById("colWonlost").value;
formData["colAmountwon"] = document.getElementById("colAmountwon").value;
formData["colWager"] = document.getElementById("colWager").value;
formData["colProfitloss"] = document.getElementById("colProfitloss").value;
return formData;
}

function insertNewRecord(data) {
var table = document.getElementById("numberList").getElementsByTagName('tbody')[0];
var newRow = table.insertRow(table.length);
cell1 = newRow.insertCell(0);
cell1.innerHTML = data.colDate;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.colPlaylist;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.colWinningnumbers;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.colWonlost;
cell5 = newRow.insertCell(4);
cell5.innerHTML = data.colAmountwon;
cell6 = newRow.insertCell(5);
cell6.innerHTML = data.colWager;
cell7 = newRow.insertCell(6);
cell7.innerHTML = data.colProfitloss;
cell7 = newRow.insertCell(7);
cell7.innerHTML = `<a onClick="onEdit(this)">Edit</a>
<a onClick="onDelete(this)">Delete</a>`;
}

function resetForm() {
document.getElementById("colDate").value = "";
document.getElementById("colPlaylist").value = "";
document.getElementById("colWinningnumbers").value = "";
document.getElementById("colWonlost").value = "";
document.getElementById("colAmountwon").value = "";
document.getElementById("colWager").value = "";
document.getElementById("colProfitloss").value = "";
selectedRow = null;
}

function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("colDate").value = selectedRow.cells[0].innerHTML;
document.getElementById("colPlaylist").value = selectedRow.cells[1].innerHTML;
document.getElementById("colWinningnumbers").value = selectedRow.cells[2].innerHTML;
document.getElementById("colWonlost").value = selectedRow.cells[3].innerHTML;
document.getElementById("colAmountwon").value = selectedRow.cells[4].innerHTML;
document.getElementById("colWager").value = selectedRow.cells[5].innerHTML;
document.getElementById("colProfitloss").value = selectedRow.cells[6].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.colDate;
selectedRow.cells[1].innerHTML = formData.colPlaylist;
selectedRow.cells[2].innerHTML = formData.colWinningnumbers;
selectedRow.cells[3].innerHTML = formData.colWonlost;
selectedRow.cells[4].innerHTML = formData.colAmountwon;
selectedRow.cells[5].innerHTML = formData.colWager;
selectedRow.cells[6].innerHTML = formData.colProfitloss;
}

body > table{
width: 80%;
}

table{
border-collapse: collapse;
}
table.list{
width:100%;
}

td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even),table.list thead>tr {
background-color: #dddddd;
}

input[type=text], input[type=number] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #CCC;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit]{
width: 30%;
background-color: #FF0000;
color: #FFF;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

form div.form-action-buttons{
text-align: right;
}

a{
cursor: pointer;
text-decoration: underline;
color: #0000ee;
margin-right: 4px;
}

label.validation-error{
color: red;
margin-left: 5px;
}

.hide{
display:none;
}

requinix · January 23, 2019

Give an ID to the table cell that has the total so you can update it later.

Create a new variable in your Javascript that will track the total. Obviously it should start at 0.

Every time you create a new record in the table, update the total. The value you use to update is data.colProfitLoss, but it is a string and you cannot do arithmetic with strings. Unfortunately you want to type negative numbers in the accounting style with parentheses, which is... well, my opinion on that is irrelevant. It means you cannot easily convert that string into a number because "(2)" isn't a valid number. Fortunately there's no point in entering that number at all because it's just the difference between the amount won and amount wagered.

Use the parseFloat function with data.colAmountwon and data.colWager to get numbers, and you can add one and subtract the other from your total in order to update its value correctly.

With the total updated you need to also update the table cell. Use getElementById with the ID you gave it earlier and set its .innerHTML property to be " $" + the new total. It will show positive values as "$10" and negative values as "$-10", but that can be fixed once you have the rest of this working.

Jayfromsandiego · January 25, 2019

Thank you for the advice requinix, but I think this whole programming thing is over my head. I am seriously upset that I can't get this stuff to work.

Edited January 25, 2019 by Jayfromsandiego

gizmola · January 25, 2019

1 hour ago, Jayfromsandiego said:

Thank you for the advice requinix, but I think this whole programming thing is over my head. I am seriously upset that I can't get this stuff to work.

What you are trying to do is non-trivial and requires an understanding of client side javascript, DOM manipulation and html.

Javascript can be a tricky language. Chrome developer tools are vital to understanding and debugging your javascript code. I recommend reading and going through this tutorial and seeing if it doesn't help you with understanding how your current code works, and how to add the things Requinix suggested.

Sign In

Adding Column Total

Recommended Posts

Jayfromsandiego

Link to comment

Share on other sites

Jayfromsandiego

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Jayfromsandiego

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information