Jump to content
Jayfromsandiego

Adding Column Total

Recommended Posts

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?

app.jpg

Edited by Jayfromsandiego

Share this post


Link to post
Share on other sites

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><!-- SOURCE CODE: https://github.com/CodAffection/Pure-JavaScript-CRUD-Operations-with-Html -->
  <div align="left"><!-- CRUD stands for create, read, update and delete. These are the four basic functions of persistent storage. Also, each letter in the acronym can refer to all functions executed in relational database applications and mapped to a standard HTTP method, SQL statement or DDS operation. -->
    <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>&nbsp;</div>
  <div style="overflow-x:auto;">
    <table bgcolor="#F5F5F5"><!-- BEGIN (Table Input Form) -->
        <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"><!-- BEGIN (Table to list all records) -->
                    <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><!-- START Column (Profit / Loss - Bottom Row "Total Box") -->
                    <tr>
                      <td bgcolor="#FF0000"><span style="font-family: verdana,arial,helvetica; font-size: 12px; color: #FFFFFF;">TOTAL:</span></td>
                      <td colspan="5">&nbsp;</td>
                      <td bgcolor="#FFFF99">&nbsp;$0</td>
                      <td>&nbsp;</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;
}

function onDelete(td) {
    if (confirm('Are you sure to delete this record ?')) {
        row = td.parentElement.parentElement;
        document.getElementById("numberList").deleteRow(row.rowIndex);
        resetForm();
    }
}
function validate() {
    isValid = true;
    if (document.getElementById("colDate").value == "") {
        isValid = false;
        document.getElementById("colDateValidationError").classList.remove("hide");
    } else {
        isValid = true;
        if (!document.getElementById("colDateValidationError").classList.contains("hide"))
            document.getElementById("colDateValidationError").classList.add("hide");
    }
    return isValid;
}

styles.css

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;
}

 

Share this post


Link to post
Share on other sites

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 "&nbsp;$" + 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.

Share this post


Link to post
Share on other sites

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 by Jayfromsandiego

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.