Sum of a column (in a Table)

I have a table running with combo boxes, basically selecting an item in the combo box (located in a <td>) will insert the selection and a price in the following <td>
but currently I am having problems creating the a total of the prices, is there any help out there?

Sep 13 '07 #1

Subscribe Post Reply

9015

ronverdonk

4,258

Expert 4TB

You can use JavaScript to do the calculations for the Total column.

Ronald

Sep 13 '07 #2

Stevee

You can use JavaScript to do the calculations for the Total column.

Ronald

I seem to be having problems with that as well, how would that be done?

Sep 13 '07 #3

drhowarddrfine

7,435

Expert 4TB

html/css cannot do this. I'll transfer you to the javascript forum.

Sep 13 '07 #4

gits

5,390

Expert Mod 4TB

hi ...

please post the code you already have ... so that we may help you with the particular problems you might have ...

kind regards

Sep 13 '07 #5

acoder

16,027

Expert Mod 8TB

Post what code you have so far.

Sep 13 '07 #6

Stevee

The script thus far, I shall be adding a little more but am stuck on this "Total" part:

Expand|Select|Wrap|Line Numbers

 <html>

<head><title>???</title>
 
<script type="text/javascript">

function getinfo()

{

var mylist=document.getElementById("info")

document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].price

}
 
function getinfo1()

{

var mylist=document.getElementById("info1")

document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].price

}
 
function getinfo2()

{

var mylist=document.getElementById("info2")

document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].price

}

</script> 
 
</head>

<body>

<table border="1">

<tr>

<td width="95" align="right">

<select id="info" onchange="getinfo()">

<option selected price=" ">Select</option>

<option price="19.00">Unit 1</option>

<option price="22.00">Unit 2</option>

<option price="25.00">Unit 3</option>

<option price="29.00">Unit 4</option>

<option price="32.00">Unit 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info1" onchange="getinfo1()">

<option selected price=" ">Select</option>

<option price="84.00">Next 1</option>

<option price="85.00">Next 2</option>

<option price="86.00">Next 3</option>

<option price="87.00">Next 4</option>

<option price="88.00">Next 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo1"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info2" onchange="getinfo2()">

<option selected price=" ">Select</option>

<option price="99.00">Again 1</option>

<option price="92.00">Again 2</option>

<option price="95.00">Again 3</option>

<option price="99.00">Again 4</option>

<option price="92.00">Again 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo2"> </td>

</tr>
 
<tr>

<td width="95" align="right">Total = </td>

<td width="75" align="right"> </td>

</tr>

</table>
 
</body>

</html>

Sep 14 '07 #7

gits

5,390

Expert Mod 4TB

hi ...

a simple way would be to use a global array and push the value to add everytime you select a value in your select-boxes. then loop through the array and add the values ... finally set the value to the display-node ...

if you need help on that ... post back with particular questions ...

kind regards

Sep 14 '07 #8

Stevee

hi ...

please post the code you already have ... so that we may help you with the particular problems you might have ...

kind regards

The script thus far, I shall be adding a little more but am stuck on this "Total" part:

Expand|Select|Wrap|Line Numbers

 
<html>

<head><title>???</title>
 
<script type="text/javascript">

function getinfo()

{

var mylist=document.getElementById("info")

document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].price

}
 
function getinfo1()

{

var mylist=document.getElementById("info1")

document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].price

}
 
function getinfo2()

{

var mylist=document.getElementById("info2")

document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].price

}

</script>
 
</head>

<body>

<table border="1">

<tr>

<td width="95" align="right">

<select id="info" onchange="getinfo()">

<option selected price=" ">Select</option>

<option price="19.00">Unit 1</option>

<option price="22.00">Unit 2</option>

<option price="25.00">Unit 3</option>

<option price="29.00">Unit 4</option>

<option price="32.00">Unit 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info1" onchange="getinfo1()">

<option selected price=" ">Select</option>

<option price="84.00">Next 1</option>

<option price="85.00">Next 2</option>

<option price="86.00">Next 3</option>

<option price="87.00">Next 4</option>

<option price="88.00">Next 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo1"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info2" onchange="getinfo2()">

<option selected price=" ">Select</option>

<option price="99.00">Again 1</option>

<option price="92.00">Again 2</option>

<option price="95.00">Again 3</option>

<option price="99.00">Again 4</option>

<option price="92.00">Again 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo2"> </td>

</tr>
 
<tr>

<td width="95" align="right">Total = </td>

<td width="75" align="right"> </td>

</tr>

</table>
 
</body>

Sep 14 '07 #9

Stevee

hi ...

a simple way would be to use a global array and push the value to add everytime you select a value in your select-boxes. then loop through the array and add the values ... finally set the value to the display-node ...

if you need help on that ... post back with particular questions ...

kind regards

Hi, I'm not particularly well practiced with javascript therefore a "global array" and "display-node" doesn't mean a great deal I'm afraid.

Sep 14 '07 #10

acoder

16,027

Expert Mod 8TB

Stevee, remember to use code tags when posting code, e.g.
[CODE=javascript]Javascript code goes here[/code]

Sep 14 '07 #11

Stevee

Stevee, remember to use code tags when posting code, e.g.

Expand|Select|Wrap|Line Numbers

Javascript code goes here

Stoopid me ok - Why?

Sep 14 '07 #12

acoder

16,027

Expert Mod 8TB

Instead of "price", use the normal attribute "value", e.g.
[HTML]<option value="99.00">[/HTML]
In each function, update the total too (by summing the three selects).

Give the td which will contain the total value an id. This will make it easier to access it.

Sep 14 '07 #13

acoder

16,027

Expert Mod 8TB

Stoopid me ok - Why?

Makes it a lot easier to read, plus you get syntax highlighting as a bonus.

Sep 14 '07 #14

Stevee

Instead of "price", use the normal attribute "value", e.g.
[HTML]<option value="99.00">[/HTML]
In each function, update the total too (by summing the three selects).

Give the td which will contain the total value an id. This will make it easier to access it.

Right, I will give that a go and let you know if I managed on Monday.

Thanks.

Sep 14 '07 #15

Stevee

Right, I will give that a go and let you know if I managed on Monday.

Thanks.

Right I have been giving that lot a go but still don't think I understand (obviously)

<html>
<head><title>???</title>

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript">

function getinfo()

{

var mylist=document.getElementById("info")

document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].value

}
 
function getinfo1()

{

var mylist=document.getElementById("info1")

document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].value

}
 
function getinfo2()

{

var mylist=document.getElementById("info2")

document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].value

}

</script>
 
<script type="text/javascript">

function startCalc()

{

one = mylist=document.getElementById("info").value;

two = mylist=document.getElementById("info1").value;

three = mylist=document.getElementById("info2").value;

TotalValue.value = (one * 1) + (two * 1) + (three * 1);

}

</script>
 
</head>

<body>

<table border="1">

<tr>

<td width="95" align="right">

<select id="info" onchange="getinfo();startCalc()">

<option selected price=" ">Select</option>

<option value="19.00">Unit 1</option>

<option value="22.00">Unit 2</option>

<option value="25.00">Unit 3</option>

<option value="29.00">Unit 4</option>

<option value="32.00">Unit 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info1" onchange="getinfo1();startCalc()">

<option selected price=" ">Select</option>

<option value="84.00">Next 1</option>

<option value="85.00">Next 2</option>

<option value="86.00">Next 3</option>

<option value="87.00">Next 4</option>

<option value="88.00">Next 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo1"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info2" onchange="getinfo2();startCalc()">

<option selected price=" ">Select</option>

<option value="99.00">Again 1</option>

<option value="92.00">Again 2</option>

<option value="95.00">Again 3</option>

<option value="99.00">Again 4</option>

<option value="92.00">Again 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo2"> </td>

</tr>
 
<tr>

<td width="95" align="right">Total = </td>

<td id="TotalValue" width="75" align="right" value=""> </td>

</tr>

</table>
 
</body>

</html>

Sep 17 '07 #16

acoder

16,027

Expert Mod 8TB

Right I have been giving that lot a go but still don't think I understand (obviously)

A td element does not have a value attribute. Use innerHTML instead:

Expand|Select|Wrap|Line Numbers

document.getElementById("TotalValue").innerHTML

You should also set the values of the first option of each select rather than using price which will probably result in NaN for the total.

Sep 17 '07 #17

Stevee

Thank you it now works a treat.

Except, the combo <TD>'s have 2 decimal places and the TotalValue has quite a few more, even though I only put in whole pence?

Regards, Stevee.

Expand|Select|Wrap|Line Numbers

 
<html>

<head><title>???</title>
 
<script type="text/javascript">

function getinfo()

{

var mylist=document.getElementById("info")

document.getElementById("displayinfo").innerHTML=mylist.options[mylist.selectedIndex].value

}
 
function getinfo1()

{

var mylist=document.getElementById("info1")

document.getElementById("displayinfo1").innerHTML=mylist.options[mylist.selectedIndex].value

}
 
function getinfo2()

{

var mylist=document.getElementById("info2")

document.getElementById("displayinfo2").innerHTML=mylist.options[mylist.selectedIndex].value

}

</script>
 
<script type="text/javascript">

function startCalc()

{

one = mylist=document.getElementById("info").value;

two = mylist=document.getElementById("info1").value;

three = mylist=document.getElementById("info2").value;

document.getElementById("TotalValue").innerHTML = (one * 1) + (two * 1) + (three * 1);

}

</script>
 
</head>

<body>

<table border="1">

<tr>

<td width="95" align="right">

<select id="info" onchange="getinfo();startCalc()">

<option selected value="12">Select</option>

<option value="19.00">Unit 1</option>

<option value="22.00">Unit 2</option>

<option value="25.00">Unit 3</option>

<option value="29.00">Unit 4</option>

<option value="32.00">Unit 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info1" onchange="getinfo1();startCalc()">

<option selected value=" ">Select</option>

<option value="84.00">Next 1</option>

<option value="85.00">Next 2</option>

<option value="86.00">Next 3</option>

<option value="87.00">Next 4</option>

<option value="88.00">Next 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo1"> </td>

</tr>
 
<tr>

<td width="95" align="right">

<select id="info2" onchange="getinfo2();startCalc()">

<option selected value=" ">Select</option>

<option value="99.00">Again 1</option>

<option value="92.00">Again 2</option>

<option value="95.00">Again 3</option>

<option value="99.00">Again 4</option>

<option value="92.00">Again 5</option>

</select>

</td>

<td width="75" align="right" id="displayinfo2"> </td>

</tr>
 
<tr>

<td width="95" align="right">Total = </td>

<td id="TotalValue" width="75" align="right" value=""> </td>

</tr>

</table>
 
</body>

</html>

Sep 18 '07 #18

acoder

16,027

Expert Mod 8TB

Thank you it now works a treat.

Except, the combo <TD>'s have 2 decimal places and the TotalValue has quite a few more, even though I only put in whole pence?

On line 30, the 'correct' way to parse strings for numbers is to use parseFloat(). If you do have problems with decimal places, use toFixed on modern browsers.

Sep 18 '07 #19

Stevee

On line 30, the 'correct' way to parse strings for numbers is to use parseFloat(). If you do have problems with decimal places, use toFixed on modern browsers.

OK, total lack of knowledge again, where on line 30
I currently have placed it here:
document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);
which still works and has reduced the decimals to 4 places.

Is this Tofixed another script or does it fit neatly (somewhere) into the:
<td id="TotalValue" width="75" align="right">

Sep 18 '07 #20

acoder

16,027

Expert Mod 8TB

OK, total lack of knowledge again, where on line 30
I currently have placed it here:
document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);
which still works and has reduced the decimals to 4 places.

Put it around each value. You could put it on the previous three lines, e.g.

Expand|Select|Wrap|Line Numbers

one = parseFloat(document.getElementById("info").value);

Is this Tofixed another script or does it fit neatly (somewhere) into the:
<td id="TotalValue" width="75" align="right">

See the examples in the link. Use it on the TotalValue.

Sep 18 '07 #21

Stevee

Put it around each value. You could put it on the previous three lines, e.g.

Expand|Select|Wrap|Line Numbers

one = parseFloat(document.getElementById("info").value);

See the examples in the link. Use it on the TotalValue.

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript">

function startCalc()

{

one = parseFloat(mylist=document.getElementById("info").value);

two = parseFloat(mylist=document.getElementById("info1").value);

three = parseFloat(mylist=document.getElementById("info2").value);

document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);

}

</script>

Now I get the dreaded - NaN

Sep 18 '07 #22

acoder

16,027

Expert Mod 8TB

Expand|Select|Wrap|Line Numbers

<script type="text/javascript">

function startCalc()

{

one = parseFloat(mylist=document.getElementById("info").value);

two = parseFloat(mylist=document.getElementById("info1").value);

three = parseFloat(mylist=document.getElementById("info2").value);

document.getElementById("TotalValue").innerHTML = parseFloat(one + two + three);

}

</script>

Now I get the dreaded - NaN

You don't need 'mylist=' and you can remove the parseFloat when totalling because they've already been parsed.

Sep 19 '07 #23

Stevee

You don't need 'mylist=' and you can remove the parseFloat when totalling because they've already been parsed.

Right, I have tried that again and the TotalValue gives me the NaN

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript">

function startCalc()

{

one = parseFloat(document.getElementById("info").value);

two = parseFloat(document.getElementById("info1").value);

three = parseFloat(document.getElementById("info2").value);

document.getElementById("TotalValue").innerHTML = (one * 1) + (two * 1) + (three * 1);

}

</script>

Sep 19 '07 #24

acoder

16,027

Expert Mod 8TB

Right, I have tried that again and the TotalValue gives me the NaN

Instead of a space for the default option values, put 0.

Sep 19 '07 #25

Stevee

Instead of a space for the default option values, put 0.

Gotcha, thankyou.

But why when it adds up 2 of the combo numbers ie 19.52 + 100 it equals 119.52

However when I add 3 of the combo numbers ie 19.52 + 100 + 99 it equals 218.51999999999998

Sep 19 '07 #26

acoder

16,027

Expert Mod 8TB

Gotcha, thankyou.

But why when it adds up 2 of the combo numbers ie 19.52 + 100 it equals 119.52

However when I add 3 of the combo numbers ie 19.52 + 100 + 99 it equals 218.51999999999998

That's a floating point accuracy problem - see link. Use toFixed() to fix it to 2 decimal places.

Sep 19 '07 #27

Stevee

That's a floating point accuracy problem - see link. Use toFixed() to fix it to 2 decimal places.

Sorry, I did no better than a "D" in GCE Math some 31 years ago, and that lot just wasted me. can you assist with the toFix please

Sep 19 '07 #28

acoder

16,027

Expert Mod 8TB

Sorry, I did no better than a "D" in GCE Math some 31 years ago, and that lot just wasted me. can you assist with the toFix please

toFixed is used on a number, so you could do something like:

Expand|Select|Wrap|Line Numbers

 total = one + two + three;

total = total.toFixed(2);

document.getElementById("TotalValue").innerHTML = total;

Sep 20 '07 #29

Stevee

toFixed is used on a number, so you could do something like:

Expand|Select|Wrap|Line Numbers

total = one + two + three;

total = total.toFixed(2);

document.getElementById("TotalValue").innerHTML = total;

Thankyou, I had to amend slightly (one * 1) + etc but this works great:

Expand|Select|Wrap|Line Numbers

 
<script type="text/javascript">

function startCalc()

{

one = document.getElementById("info").value;

two = document.getElementById("info1").value;

three = document.getElementById("info2").value;

total = (one * 1) + (two * 1) + (three * 1);

total = total.toFixed(2);

four = document.getElementById("TotalValue").innerHTML = total;

totalvat = (four / 100 * 17.5) + (four * 1);

totalvat = totalvat.toFixed(2);

five = document.getElementById("TotalVat").innerHTML = totalvat;

}

</script>

My biggest problem was how to tell it the number toFix was TotalValue

Sep 20 '07 #30

acoder

16,027

Expert Mod 8TB

Glad to hear you finally got it working how you want it.

Sep 20 '07 #31

Similar topics

create table / column table order

by: Randell D. | last post by:

Folks, When creating a table, is there any advantage in specifying the columns in any special order? For example, what about columns with data used more frequently listed first, or column/data...

MySQL Database

Function to create comma separated list from any given column/table.

by: Not Me | last post by:

Hi, I'm sure this is a common problem.. to create a single field from a whole column, where each row would be separated by a comma. I can do this for a specified table, and column.. and I've...

Microsoft SQL Server

Replacing a 2 column table with CSS

by: Peter Foti | last post by:

Hi all, I have a form that contains a 2 column table. In the left column is the description for a particular input (ie - "First Name", "Last Name", "Phone Number", etc.). In the right column...

HTML / CSS

Create a table with a column for each record in a 1 column table

by: Kathy | last post by:

Hi and thanks in advance for your help! I have Access 2000. I have imported a delinited text file and now have table with one column containing 100 records. I would like to display these values in...

Microsoft Access / VBA

Manipulating a two-column table?

by: Hymer | last post by:

Hello, I have a small two-column table with three rows. The first column has a logo and the second column has the name of the organization. The logo's in the first column are too high. That...

HTML / CSS

Changing one column of a two-column table?

by: Hymer | last post by:

Hello, I have a small two-column table with three rows. The first column has a logo and the second column has the name of the organization. The logo's in the first column are too high. That...

HTML / CSS

Problems outputting to a 3 column table in order to crate an image gallery

by: ste | last post by:

Hi there, I'm trying to query a MySQL database (containing image data) and to output the results in a HTML table of 3 columns wide (and however many rows it takes) in order to create a basic...

PHP

Convert 6-column table to CSS layout

by: akress | last post by:

Hiya, I'm trying to convert a table with 6 colums that looks like this: <table class="myTable" width="640px"> <tr> <td><a href="#"> <img src="../_img/announce.gif" align="middle"...

HTML / CSS

Editable mult-column table

by: kelvin.koogan | last post by:

I want to display a two column multi-row table in a Windows Forms app. I want the user to be able to edit all values in both columns. Table will need to scroll vertically. What is the best...

.NET Framework

Implied width of implied center column in 3 column table

by: Csaba Gabor | last post by:

I have a table with 3 rows, and two pieces of data to display in each row. However, the first element of the last two rows and the 2nd element of the 1st row are very short. This would seem to...

HTML / CSS

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET