The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> HTML and Javascript
Amitesh
post Jun 9 2022, 12:23 AM
Post #1





Group: Members
Posts: 8
Joined: 8-June 22
Member No.: 28,380



I am working on a project to convert an excel file into a webpage. I have been able to design the page but now need to do some calculations (preferably automatic)

I have attached an html file with some codding i have done. I need the following calculations

- Calculate the sum of rows in the 2nd last column
- Calculate the sum on the bottom of all the columns
- In the last column i need a total from the sum multiplied by certain numbers as per mentioned in the tables below using high and low complexity

High Complexity:
Channel Existing New PLACEHOLDER ECCO Shell Expire Links Metadata PLACEHOLDER Images Modified More Than 6 Months Word Count More Than 2,000
Articles 180 240 15 10 2 10 0 30 60 60
Component Metadata 0 0 0 0 0 2 0 0 0 0
CAP/CAT/LE 75 75 15 10 2 10 0 30 60 60
DIR Component 45 45 15 2 2 2 0 30 45 45
Promotions 60 60 15 10 2 10 0 30 60 60
Alert/News 60 60 15 10 2 10 0 30 60 60
Update/News 60 60 15 10 2 10 0 30 60 60
ECCO Shell 15 15 15 10 2 10 0 30 15 15
Category Landing Page 180 240 15 10 2 10 0 30 60 60
Rewrite 240 240 15 10 2 10 0 30 60 60



Low Complexity:
Channel Existing New ECCO Shell Expire Links Metadata PLACEHOLDER Images Modified More Than 6 Months Word Count More Than 2,000
Articles 180 240 15 10 10 10 0 30 60 60
Component 45 45 15 10 10 2 0 30 60 60
CAP/CAT/LE 75 75 15 10 10 10 0 30 60 60
DIR Component 45 45 15 10 10 2 0 30 60 60
Promotions 60 60 15 10 10 10 0 30 60 60
Alert/News 60 60 15 10 10 10 0 30 60 60
Update/News 60 60 15 10 10 10 0 30 60 60
ECCO Shell 15 15 15 10 10 10 0 30 60 60
Category Landing Page 180 240 15 10 10 10 0 30 60 60
Rewrite 240 240 15 10 10 10 0 30 60 60


Attached File(s)
Attached File  Tables.html ( 10.95k ) Number of downloads: 605
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies
Amitesh
post Jun 9 2022, 11:02 PM
Post #2





Group: Members
Posts: 8
Joined: 8-June 22
Member No.: 28,380



QUOTE
Christian J: You could let the javascript loop through each table row; then let a second, nested loop sum each INPUT value in the outer loop's current row.


QUOTE
Christian J: The sum of that column's INPUT values? Then first count the number of columns, and loop through; then let a second, nested loop go through the table rows and sum the current column's INPUT value.


Would you be able to provide me with the codes.

This post has been edited by Amitesh: Jun 9 2022, 11:04 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 10 2022, 12:35 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,684
Joined: 10-August 06
Member No.: 7



QUOTE(Amitesh @ Jun 10 2022, 06:02 AM) *

Would you be able to provide me with the codes.

I can't write the whole thing for you, but here's a simplified example of how to sum together row- and column values. Working with nested loops may feel confusing if you're not used to it, but it often helps to add alertboxes in the script to check what's going on in each part.

Also keep in mind you're only allowed to use each unique ID value once per page, that's why I'm using DOM methods below tp find the proper elements.

CODE
<table id="table" border=1>
<tr>
<th>Request Type</th>
<th>Existing</th>
<th>New</th>
<th>Total</th>
<th>Forecast in Minutes</th>
</tr>
<tr>
<th>Articles</th>
<td><input type="text" name="" value="1"></td>
<td><input type="text" name="" value="2"></td>
<td>Sum: <input type="text" name="" value="0"></td>
<td>x</td>
</tr>
<tr>
<th>Component Metadata</th>
<td><input type="text" name="" value="3"></td>
<td><input type="text" name="" value="4"></td>
<td>Sum: <input type="text" name="" value="0"></td>
<td>x</td>
</tr>
<tr>
<th>Task total:</th>
<td>Sum: <input type="text" name="" value="0"></td>
<td>Sum: <input type="text" name="" value="0"></td>
<td>Sum: <input type="text" name="" value="0"></td>
<td>x</td>
</tr>
</table>

<script type="text/javascript">
function Calculate()
{
    var table = document.getElementById('table');

    /* -------- sum each row ----------- */

    // "i=1", since the first row is skipped.
    // "length-1", since the last row is skipped.
    for(var i=1; i<table.rows.length-1; i++)
    {
        var row_sum=0;

        // "j=1", since the first column is skipped.
        // "length-2", since the last two columns are skipped.
        for(var j=1; j<table.rows[i].cells.length-2; j++)
        {
            // "input[0]" is the first (and only) INPUT element in each cell.
            // "*1" converts the type of the INPUT value from string to number.
            row_sum+=table.rows[i].cells[j].getElementsByTagName('input')[0].value*1;
        }

        // Display result in the second-last cell in each column
        table.rows[i].lastElementChild.previousElementSibling.getElementsByTagName('input')[0].value=row_sum;
    }



    /*--------- sum each column -----------------*/

    // Number of columns in the first row.
    var columns=table.rows[0].cells.length;

    // "x=1", since the first column is skipped.
    // "-1", since last column is skipped.
    for(var x=1; x<columns-1; x++)
    {
        var col_sum=0;

        // "y=1", since the first row is skipped.
        // "length-1" since the last row is skipped.
        for(var y=1; y<table.rows.length-1; y++)
        {
            // "input[0]" is the first (and only) INPUT element in each cell.
            // "*1" converts the type of the INPUT value from string to number.
            col_sum+=table.rows[y].cells[x].getElementsByTagName('input')[0].value*1;
        }

        // Display result in the bottom row of each column
        table.rows[table.rows.length-1].cells[x].getElementsByTagName('input')[0].value=col_sum;
    }
}
</script>

<input type="button" name="" value="Calculate" onclick="Calculate();">

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Amitesh
post Jun 17 2022, 10:38 AM
Post #4





Group: Members
Posts: 8
Joined: 8-June 22
Member No.: 28,380



QUOTE(Christian J @ Jun 10 2022, 12:35 PM) *


I can't write the whole thing for you, but here's a simplified example of how to sum together row- and column values. Working with nested loops may feel confusing if you're not used to it, but it often helps to add alertboxes in the script to check what's going on in each part.

Also keep in mind you're only allowed to use each unique ID value once per page, that's why I'm using DOM methods below tp find the proper elements.



Can we use this script to do a multiplication

<script type="text/javascript">

function getValues() {
var rows = document.querySelectorAll("tr.package-row");
rows.forEach(function (currentRow) {

var numberUsed = Number(currentRow.querySelector('#numberUsed').value);
var price = Number(currentRow.querySelector('#price').value);
var inPackage = Number(currentRow.querySelector('#inPackage').value);
var revenue = 0;

document.querySelectorAll('numberUsed');

if (numberUsed == "") {
if (isNaN(inPackage) || isNaN(price)) {
return;
}
revenue = price * inPackage;
}
else {
if (isNaN(numberUsed) || isNaN(price)) {
return;
}
revenue = price * numberUsed;
}
var value = revenue * 5;
currentRow.querySelector("#revenue").innerHTML = revenue;
currentRow.querySelector("#value").innerHTML = value;
});

}

</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 17 2022, 02:12 PM
Post #5


.
********

Group: WDG Moderators
Posts: 9,684
Joined: 10-August 06
Member No.: 7



QUOTE(Amitesh @ Jun 17 2022, 05:38 PM) *

Can we use this script to do a multiplication

That's what it appears to do, but I haven't tested it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic


Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 10th June 2024 - 03:05 AM