count the values of a table column 
August 27th, 2008, 03:27 PM
| | Familiar Sight | | Join Date: Jun 2008
Posts: 161
| | count the values of a table column
Hi I have a table that I add rows to using javascript. I need to have a runnig total of one of the columns. Does anyone know how this can be done? - <table border="2" cellspacing="2" cellpadding="2" width=100% id="myTable1">
-
<tr>
-
<th> </th>
-
<th>Part no.</th>
-
<th>Description</th>
-
<th>Price (£)</th>
-
<th>Quantity</th>
-
<th>Discount</th>
-
<th>Supplier</th>
-
<th>Sub Total</th>
-
</tr>
-
</table>
-
<span>£<span id ="total"></span></span>
heres the javascript I use to add a row - var tbl = document.getElementById('myTable1');
-
var lastRow = tbl.rows.length;
-
// alert (lastRow);
-
// if there's no header row in the table, then iteration = lastRow + 1
-
var iteration = lastRow;
-
var row = tbl.insertRow(lastRow);
-
-
// cell number
-
var cellLeft = row.insertCell(0);
-
var textNode = document.createTextNode(iteration);
-
cellLeft.appendChild(textNode);
-
-
// part number
-
var cellpno = row.insertCell(1);
-
var t_pno = document.createTextNode(part_no);
-
cellpno.appendChild(t_pno);
-
-
//description
-
var celldesc = row.insertCell(2);
-
var t_desc = document.createTextNode(description);
-
celldesc.appendChild(t_desc);
-
-
//price
-
var cellprice = row.insertCell(3);
-
var t_price = document.createTextNode(price);
-
cellprice.appendChild(t_price);
-
-
//quantity
-
var cellqty = row.insertCell(4);
-
var t_qty = document.createTextNode(quantity);
-
cellqty.appendChild(t_qty);
-
-
//discount
-
var celldisc = row.insertCell(5);
-
var t_disc = document.createTextNode(discount);
-
celldisc.appendChild(t_disc);
-
-
//supplier
-
var cellsup = row.insertCell(6);
-
var t_sup = document.createTextNode(supplier);
-
cellsup.appendChild(t_sup);
-
-
//subtotal
-
var cellsub = row.insertCell(7);
-
var sub = quantity * price;
-
var sub1 = (sub / 100) * discount;
-
var sub2 = sub - sub1;
-
var result = sub2.toFixed(2);
-
var t_sub = document.createTextNode(result);
-
cellsub.appendChild(t_sub);
-
-
document.getElementById('part_no').value = "";
-
document.getElementById('quantity').value = "";
-
document.getElementById('description').value = "";
-
document.getElementById('price').value = "";
-
document.getElementById('discount').value = "";
-
total();
| 
August 27th, 2008, 09:15 PM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany Age: 32
Posts: 2,227
| |
I'm not sure if you want to count rows or columns, nevertheless try following: - document.getElementById("mytable1").childNodes.length
-
// should count tr elements (except when you use tbody)
-
document.getElementById("mytable1").firstChild.childNodes.length
-
// should count td elements of the first row
regards
| 
August 28th, 2008, 07:23 AM
| | Familiar Sight | | Join Date: Jun 2008
Posts: 161
| |
Not sure what the first line is doing as it always gives a result of 1. The second line seems to count he number of rows. What I want to do is loop through each row and add the contents of a particular column to a variable. Any ideas?
| 
August 28th, 2008, 08:04 AM
|  | Moderator | | Join Date: May 2007 Location: Munich, Germany Age: 37
Posts: 3,780
| |
hi ...
try the following: - alert(document.getElementById("mytable1").childNodes[0].tagName);
i think this will tell you 'tbody' ... i guess you use IE? ... so you just need to add one step more and loop through the rows, then in every row though the coloumns and extract the value you need. for better advice it would be helpful to have something to work with ... so please post an example that you have so far.
kind regards
| 
August 28th, 2008, 08:17 AM
| | Familiar Sight | | Join Date: Jun 2008
Posts: 161
| |
I havnt used tbody in my code. heres what I have so far - function total() {
-
var tbl = document.getElementById('myTable1');
-
var lastRow = tbl.rows.length;
-
for (var i=1; i < lastRow; i++) {
-
alert(tbl.rows[i].cols[7]);
-
}
-
}
If I could just work out how to get the value of column7 for each row I would be sorted
| 
August 28th, 2008, 08:24 AM
| | Familiar Sight | | Join Date: Jun 2008
Posts: 161
| |
ive worked it out - function total() {
-
var tbl = document.getElementById('myTable1');
-
var lastRow = tbl.rows.length;
-
for (var i=1; i < lastRow; i++) {
-
alert(tbl.rows[i].cells[7].innerHTML);
-
}
-
}
| 
August 28th, 2008, 08:28 AM
|  | Needs Regular Fix | | Join Date: Mar 2008 Location: Chennai - India Age: 24
Posts: 297
| | Quote: |
Originally Posted by cleary1981 I havnt used tbody in my code. heres what I have so far - function total() {
-
var tbl = document.getElementById('myTable1');
-
var lastRow = tbl.rows.length;
-
for (var i=1; i < lastRow; i++) {
-
alert(tbl.rows[i].cols[7]);
-
}
-
}
If I could just work out how to get the value of column7 for each row I would be sorted | [HTML]var table = document.getElementById("myTable1");
var lastRow = table.rows.length;
for (var i=1; i < lastRow; i++) {
alert(table.rows[i].cells[6].innerHTML);
}[/HTML]
This may help u out. In order to retrieve the seventh column i placed six in the cells.
Regards
Ramanan Kalirajan
| 
August 28th, 2008, 08:41 AM
| | Familiar Sight | | Join Date: Jun 2008
Posts: 161
| |
Yeah had just worked that out. Thanks
The problem I am having now is that I am trying to add 2 values but it concatenates them instead. What can I do here? - function total() {
-
var total =0;
-
var tbl = document.getElementById('myTable1');
-
var lastRow = tbl.rows.length;
-
for (var i=1; i < lastRow; i++) {
-
var val = tbl.rows[i].cells[7].innerHTML;
-
var tt = total
-
total = tt + val;
-
}
-
document.getElementById('total').innerHTML = total;
-
}
| 
August 28th, 2008, 08:53 AM
| | Familiar Sight | | Join Date: Jun 2008
Posts: 161
| |
thats me sorted. I used parseFloat and that worked a treat. thanks guys
| 
August 28th, 2008, 09:04 AM
|  | Moderator | | Join Date: Aug 2008 Location: Leipzig, Germany Age: 32
Posts: 2,227
| |
the + sign serves for mathematical addition as well as string concatenation. I think that you get concatenation because val (I think that's supposed to be a number) is retrieved by innerHTML (which is essentially a text node/node set) instead of value. You may try parseInt(), parseFloat() or Number() for conversion.
| 
August 28th, 2008, 09:05 AM
|  | Moderator | | Join Date: May 2007 Location: Munich, Germany Age: 37
Posts: 3,780
| | Quote: |
Originally Posted by cleary1981 I havnt used tbody in my code. | just a note: in IE that doesn't matter ... it always assumes a tbody ... have a look here (first comment) ... typically this problem is relevant for adding rows ... and in case you retrieve the firstChild of a table in IE it IS tbody ... even when you don't use it explicitly.
kind regards
|  | | Thread Tools | Search this Thread | | | | | | | What is Bytes?
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 220,989 network members.
|