I would like to show more information when someone click on show more buttons. The complication is that there are several buttons and informations to toggle with same className.
What am I doing wrong??
var element = document.querySelectorAll("btn");
for (var i = 0; i < button_length ; i++) {
element[i].addEventListener("click", function() {
alert("Button Clicked " + i);
element[i].classList.toggle("extrainfo");
};
}
td{border:solid 1px black;}
.btn, #btn_id{color:blue; text-decoration:underline; cursor:pointer;}
.extrainfo{
display:none
}
<table>
<tbody>
<tr class="info_group">
<td>Title 1</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 1</td>
</tr>
</tbody>
<tbody>
<tr class="info_group">
<td>Title 2</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 2</td>
</tr>
</tbody>
<tbody>
<tr class="info_group">
<td>Title 3</td>
<td class="btn">show more</td>
</tr>
<tr>
<td class="extrainfo" colspan="2">More info 3</td>
</tr>
</tbody>
</table>
to work you javaScript
var element = document.querySelectorAll("btn"); // need to be (".btn")
// you want it to be i < element.length; ? or there's a variable called button_length?
for (var i = 0; i < button_length ; i++) {
element[i].addEventListener("click", function() {
alert("Button Clicked " + i);
element[i].classList.toggle("extrainfo");
}; // missing a Parenthesis need to be this }); not this };
}
I'm still not sure about the functionality, but see the code below if that's what you're looking for.
var element = document.querySelectorAll(".btn");
var extraInfo = document.querySelectorAll(".extrainfo");
for (let i = 0; i < element.length; i++) {
element[i].addEventListener("click" , function() {
extraInfo[i].classList.toggle("extrainfo");
});
}
hereJSFiddle you can play around with the code
Related
I have many tables and I want to give all tr's individual ids. I loop through all tbody but it only affects first tbody, not all of them. When I add loop indicating each tbody they work. Is there any efficient way available to loop through all tbody and give the tr's individual id. I want to do it using vanilla javascript, no jQuery.
My sample code here :
<table><tbody>
<tr><td>No.</td><td>Name</td><td>Score</td></tr>
<tr><td>01</td><td>ted</td><td>0.50</td></tr>
<tr><td>02</td><td>joe</td><td>0.25</td></tr>
</tbody></table>
<table><tbody>
<tr><td>Name</td><td>Address</td><td>Phone</td></tr>
<tr><td>joe</td><td>LA</td><td>012345</td></tr>
<tr><td>ted</td><td>NY</td><td>0124</td></tr>
</tbody></table>
<table><tbody>
<tr><td>Name</td><td>Spec</td><td>Budget</td></tr>
<tr><td>joe</td><td>i5</td><td>458</td></tr>
<tr><td>ted</td><td>i7</td><td>768</td></tr>
</tbody></table>
Javascript :
var c = document.getElementsByTagName('tbody');
var _trIndex = 1;
for ( i=0; i<c.length; i++) {
var x = c[i].rows;
for (i=0; i<x.length; i++){
x[i].setAttribute('id','tr'+_trIndex++)
}
}
Second Try :
var c = document.getElementsByTagName('tbody');
var _trIndex = 1;
for ( i=0; i<c.length; i++) {
var x = c[0].rows;
for (i=0; i<x.length; i++){
x[i].setAttribute('id','tr'+_trIndex++)
}
var y = c[1].rows;
for (i=0; i<y.length; i++){
y[i].setAttribute('id','tr'+_trIndex++)
}
}
Probably this is what you need:
// Instead of getting the table bodies, I get only the table
// rows inside the tbody elements.
var c = document.querySelectorAll('tbody tr');
// Here I check if definitely the above query found any values.
if ( c ) {
// Then I do the itteration to the found tr elements
for ( i = 0; i < c.length; i++) {
// And here I set the ID the same way you did in your example
c[i].setAttribute('id','tr'+i);
}
}
<table>
<tbody>
<tr><td>No.</td><td>Name</td><td>Score</td></tr>
<tr><td>01</td><td>ted</td><td>0.50</td></tr>
<tr><td>02</td><td>joe</td><td>0.25</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>Name</td><td>Address</td><td>Phone</td></tr>
<tr><td>joe</td><td>LA</td><td>012345</td></tr>
<tr><td>ted</td><td>NY</td><td>0124</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>Name</td><td>Spec</td><td>Budget</td></tr>
<tr><td>joe</td><td>i5</td><td>458</td></tr>
<tr><td>ted</td><td>i7</td><td>768</td></tr>
</tbody>
</table>
You can achieve this with a single line of javascript.
document.querySelectorAll("tbody tr").forEach((element, index) => element.setAttribute("id", "tr" + index));
<table>
<thead>
<tr>
<td>No.</td>
<td>Name</td>
<td>Score</td>
</tr>
</thead>
<tbody>
<tr>
<td>No.</td>
<td>Name</td>
<td>Score</td>
</tr>
<tr>
<td>01</td>
<td>ted</td>
<td>0.50</td>
</tr>
<tr>
<td>02</td>
<td>joe</td>
<td>0.25</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Name</td>
<td>Address</td>
<td>Phone</td>
</tr>
<tr>
<td>joe</td>
<td>LA</td>
<td>012345</td>
</tr>
<tr>
<td>ted</td>
<td>NY</td>
<td>0124</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Name</td>
<td>Spec</td>
<td>Budget</td>
</tr>
<tr>
<td>joe</td>
<td>i5</td>
<td>458</td>
</tr>
<tr>
<td>ted</td>
<td>i7</td>
<td>768</td>
</tr>
</tbody>
</table>
Edit
So many good answers and all of them work! Thanks a lot guys :) I wish I could mark all of them as solved!
----
Good day
Let's say I have these 2 text inputs:
<input type="text" id="plt_quantity_sum"/> <!-- this should calculate the "#quantity" where each "#uom_value" is "PLT" -->
<input type="text" id="crt_quantity_sum"/><!-- this should calculate the "#quantity" where each "#uom_value" is "CRT" -->
Let's assume the following scenario:
<table>
<tbody>
<tr>
<th>Item Name</th>
<th id="uom_value">UOM</th>
<th id="qty">Quantity</th>
</tr>
<tr>
<td>Item 1</td>
<td id="uom_value">PLT</td>
<td id="qty">5</td>
</tr>
<tr>
<td>Item 2</td>
<td class="uom_value">PLT</td>
<td id="qty">3</td>
</tr>
<tr>
<td>Item 3</td>
<td id="uom_value">CRT</td>
<td id="qty">2</td>
</tr>
<tr>
<td>Item 4</td>
<td id="uom_value">CRT</td>
<td id="qty">3</td>
</tr>
</tbody>
</table>
<input type="text" id="plt_quantity_sum" />
<input type="text" id="crt_quantity_sum" />
What needs to happen:
When the document loads, or via a button click; the quantity of "#plt_quantity_sum" and "#crt_quantity_sum" should be calculated based on their respective quantities and "UOM" values.
Some Javascript I had in mind which should clarify what exactly needs to happen:
$(document).ready(function(){
if (document.getElementById("#uom_value").value == "PLT"){
document.getElementById("#plt_quantity_sum").value == (sum of #qty);
}
else if (document.getElementById("#uom_value").value == "CRT"){
document.getElementById("#crt_quantity_sum").value == (sum of #qty);
}
});
Thanks for reading and I would greatly appreciate any help.
You just need declare two variables crtQtySum and pltQtySum for the two sums and initialize them to 0, then loop over the tds and check if it's crt or plt and updtae your variables accordingly:
$(document).ready(function() {
var crtQtySum = 0;
var pltQtySum = 0;
$(".uom_value").each(function() {
if ($(this).text() === "CRT") {
crtQtySum += parseInt($(this).next("td.qty").text());
} else if ($(this).text() === "PLT") {
pltQtySum += parseInt($(this).next("td.qty").text());
}
});
$("#plt_quantity_sum").val(pltQtySum);
$("#crt_quantity_sum").val(crtQtySum);
});
$(document).ready(function() {
var crtQtySum = 0;
var pltQtySum = 0;
$(".uom_value").each(function() {
if ($(this).text() === "CRT") {
crtQtySum += parseInt($(this).next("td.qty").text());
} else if ($(this).text() === "PLT") {
pltQtySum += parseInt($(this).next("td.qty").text());
}
});
$("#plt_quantity_sum").val(pltQtySum);
$("#crt_quantity_sum").val(crtQtySum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<th>Item Name</th>
<th class="uom_value">UOM</th>
<th class="qty">Quantity</th>
</tr>
<tr>
<td>Item 1</td>
<td class="uom_value">PLT</td>
<td class="qty">5</td>
</tr>
<tr>
<td>Item 2</td>
<td class="uom_value">PLT</td>
<td class="qty">3</td>
</tr>
<tr>
<td>Item 3</td>
<td class="uom_value">CRT</td>
<td class="qty">2</td>
</tr>
<tr>
<td>Item 4</td>
<td class="uom_value">CRT</td>
<td class="qty">3</td>
</tr>
</tbody>
</table>
PLT:<input type="text" id="plt_quantity_sum" readonly/></br>
CRT:<input type="text" id="crt_quantity_sum" readonly/>
Note:
I used readonly attribute with the inputs, as they're just used to display the sums so they can't be modified, but we could just used a block element for that like div or span.
You can try this code. I ve didnt test it.
var plt_count = 0;
var crt_count = 0;
$(".uom_value").each(function() {
if($(this).html === 'PLT'){
plt_count += parseInt($(this).closest('.qty').html());
}
if($(this).html === 'CRT'){
crt_count += parseInt($(this).closest('.qty').html());
}
});
$("#plt_quantity_sum").val(plt_count);
$("#crt_quantity_sum").val(crt_count);
Apart from correcting the spelling mistakes that Hamza pointed out, I'd say you should basically iterate through the elements given its class name document.getElementsByClassName('.someclass') and then store and sum the value of each one of its siblings with class '.qty'.
Then you take that value and use it to populate the input you want.
Hope that helps ;)
This can be done using so many method, this is one of them :
$(document).ready(function(){
var sum_PLT = 0, sum_CRT = 0;
$('table > tbody > tr').each(function() {
tr = $(this)[0];
cells = tr.cells;
if(cells[0].textContent != "Item Name"){//To exclude the <th>
if(cells[1].textContent == "PLT")
sum_PLT += parseInt(cells[2].textContent);
else
sum_CRT += parseInt(cells[2].textContent);
}
});
$("#plt_quantity_sum").val(sum_PLT);
$("#crt_quantity_sum").val(sum_CRT);
});
This is a working jsFiddle.
You might want to try this code.
<script>
$(document).ready(function(){
var plt_qty = 0;
var crt_qty = 0;
$('.uom_value').each(function(){
if ($(this).text() === 'PLT' ) {
plt_qty = plt_qty + parseInt($(this).parent().find('.qty').text());
}else if ($(this).text() === 'CRT' ) {
crt_qty = crt_qty + parseInt($(this).parent().find('.qty').text());
}
});
$("#plt_quantity_sum").val(plt_qty);
$("#crt_quantity_sum").val(crt_qty);
});
</script>
Note : remove class uom_value in <th class="uom_value">UOM</th>.
I'm trying to only retrieve the POSTCODE field in this script.
Is there a way to only return this value?
<script>
function LookuptableWend(query) {
var tr = document.getElementsByTagName("tr"),y=0;
for (i = 0; i < tr.length; i++) {
if((y<25)&&(query)&&(tr[i].innerHTML.search(query)>-1)){
tr[i].className="found";y+=1;
}
else{tr[i].className="";
}
}
}
</script>
<table class="lookuptable" >
<tbody>
<tr>
<td>0097040K</td>
<td>Hospital Name 1</td>
<td>2/70 Kent Street</td>
<td>Block 1 </td>
<td>DEAKIN</td>
<td>ACT</td>
<td>2600</td>
<td>02 6232 4793</td>
</tr>
<script>LookuptableWend(document.getElementById("search").value);</script>
You could use querySelectorAll with nth-child (comments in js below)
function LookuptableWend(query) {
var td = document.querySelectorAll(".lookuptable td:nth-child(7)"); // get all postcode cells
for (i = 0; i < td.length; i++) {
if (td[i].innerHTML.search(query) != -1) { // search them for your query string
td[i].parentNode.className = "found"; // add a class to the row
} else {
td[i].parentNode.className = "";
}
}
}
LookuptableWend(2600);
.found {
background: green;
}
<table class="lookuptable">
<tbody>
<tr>
<td>0097040K</td>
<td>Hospital Name 1</td>
<td>2/70 Kent Street</td>
<td>Block 1 </td>
<td>DEAKIN</td>
<td>ACT</td>
<td>2600</td>
<td>02 6232 4793</td>
</tr>
<tr>
<td>0097040K</td>
<td>Hospital Name 1</td>
<td>2/70 Kent Street</td>
<td>Block 1 </td>
<td>DEAKIN</td>
<td>ACT</td>
<td>2601</td>
<td>02 6232 4793</td>
</tr>
<tr>
<td>0097040K</td>
<td>Hospital Name 1</td>
<td>2/70 Kent Street</td>
<td>Block 1 </td>
<td>DEAKIN</td>
<td>ACT</td>
<td>2600</td>
<td>02 6232 4793</td>
</tr>
</tbody>
</table>
I have the following table:
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>
I need a way to add/sum all values grouped by category, ie: add/sum all values in cat1, then add/sum all values in cat2. For each group I will do something with the total.
So I was hoping for something like:
for each unique category:
sum values in category
do something with this category total
For cat1 the total would be 123 + 486. Cat2 would just be 356. And so on if there were more categories.
I would prefer a purely javascript solution, but JQuery will do if that's not possible.
If I understand you correctly, you do a repeat of each td:first-child (The category cell).
Create a total object. You can check if the category is exist in it for each cell. If so, add current value to the stored value. If not, insert new property to it.
Like this:
var total = {};
[].forEach.call(document.querySelectorAll('td:first-child'), function(td) {
var cat = td.getAttribute('class'),
val = parseInt(td.nextElementSibling.innerHTML);
if (total[cat]) {
total[cat] += val;
}
else {
total[cat] = val;
}
});
console.log(total);
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>
Here's a simple approach using only javascript
//grab data
var allTR = document.getElementsByTagName('TR');
var result = {};
//cycle table rows
for(var i=0;i<allTR.length;i+2){
//read class and value object data
var class = allTR[i].getAttribute('class');
var value = allTR[i+1].innerText;
//check if exists and add, or just add
if(result[class])
result[class] += parseInt(value);
else
result[class] = parseInt(value);
}
You have to use getElementsByTagName("td"); to get all the <td> collection and then you need to loop through them to fetch their innerText property which later can be summed up to get the summation.
Here is the working Fiddle : https://jsfiddle.net/ftordw4L/1/
HTML
<table id="tbl1">
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
<tr>
<td class="total"><b>Total</b></td>
<td class="totalValue"></td>
</tr>
</table>
Javascript
var tds=document.getElementsByTagName("td");
var total=0;
for (var i = 0; i<tds.length; i++) {
if (tds[i].className == "value") {
if(total==0) {
total = parseInt(tds[i].innerText);
} else {
total = total + parseInt(tds[i].innerText);
}
}
}
document.getElementsByClassName('totalValue')[0].innerHTML = total;
Hope this helps!.
here is a solution with jQuery :) if you are interested. it's pretty straightforward
var sumCat1 = 0;
var sumCat2 = 0;
$(".cat1 + .value").each(function(){
sumCat1 += parseInt($(this).text());
})
$(".cat2 + .value").each(function(){
sumCat2 += parseInt($(this).text());
})
console.log(sumCat1)
console.log(sumCat2)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>Category</th>
<th>Value</th>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">123</td>
</tr>
<tr>
<td class="cat2">cat2</td>
<td class="value">356</td>
</tr>
<tr>
<td class="cat1">cat1</td>
<td class="value">486</td>
</tr>
</table>
A simple approach in JQuery...
var obj = {};
$('tr').each(function() {
$this = $(this)
if ($this.length) {
var cat = $(this).find("td").first().html();
var val = $(this).find("td").last().html();
if (cat) {
if (!obj[cat]) {
obj[cat] = parseInt(val);
} else {
obj[cat] += parseInt(val);
}
}
}
})
console.log(obj)
$(document).ready(function() {
var week = 5;
var players = 8;
var numbers = [];
var array = [];
for (o = 0; o < players; o++) {
for (i = 0; i < week + 1; i++) {
var improved = i + 1;
var oString = o.toString();
var iString = i.toString();
var id = "#" + oString + iString;
var rawText = $(id).text();
var refined = Number(rawText);
array.push(refined);
}
numbers.push(array);
array = [];
}
for (p = 0; i < numbers.length; p++) {
var total1 = 0;
$.each(numbers[0], function() {
total1 += this;
});
}
$("#total1").text(total1);
for (p = 0; i < numbers.length; p++) {
var total2 = 0;
$.each(numbers[0], function() {
total2 += this;
});
}
$("#total2").text(total2);
for (p = 0; i < numbers.length; p++) {
var total3 = 0;
$.each(numbers[0], function() {
total3 += this;
});
}
$("#total3").text(total3);
for (p = 0; i < numbers.length; p++) {
var total4 = 0;
$.each(numbers[0], function() {
total4 += this;
});
}
$("#total4").text(total4);
for (p = 0; i < numbers.length; p++) {
var total5 = 0;
$.each(numbers[0], function() {
total5 += this;
});
}
$("#total5").text(total5);
var total = total1 + total2 + total3 + total4 + total5;
$("#total").text(total);
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="jquery-1.11.1.min.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="style2.css">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>
<body>
<table>
<tr>
<th>Player</th>
<th>Position</th>
<th>Week 7</th>
<th>Week 8</th>
<th>Week 9</th>
<th>Week 10</th>
<th>Week 11</th>
</tr>
<tr>
<td>Matt Ryan</td>
<td>QB</td>
<td id="01">11</td>
<td id="02">15</td>
<td id="03">00</td>
<td id="04">14</td>
<td id="05">14</td>
</tr>
<tr>
<td>Marshawn Lynch</td>
<td>RB</td>
<td id="11">06</td>
<td id="12">01</td>
<td id="13">09</td>
<td id="14">40</td>
<td id="15">12</td>
</tr>
<tr>
<td>Calvin Johsnon</td>
<td>WR</td>
<td id="21">00</td>
<td id="22">00</td>
<td id="23">00</td>
<td id="24">00</td>
<td id="25">00</td>
</tr>
<tr>
<td>Allen Hurns</td>
<td>WR</td>
<td id="31">00</td>
<td id="32">04</td>
<td id="33">23</td>
<td id="34">17</td>
<td id="35">05</td>
</tr>
<tr>
<td>A.J. Green</td>
<td>WR</td>
<td id="41">00</td>
<td id="42">00</td>
<td id="43">10</td>
<td id="44">02</td>
<td id="45">18</td>
</tr>
<tr>
<td>Julius Thomas</td>
<td>Tight End</td>
<td id="51">02</td>
<td id="52">02</td>
<td id="53">09</td>
<td id="54">18</td>
<td id="55">00</td>
</tr>
<tr>
<td>Matt Bryant</td>
<td>Kicker</td>
<td id="61">00</td>
<td id="62">03</td>
<td id="63">00</td>
<td id="64">15</td>
<td id="65">15</td>
</tr>
<tr>
<td>Texans</td>
<td>Defense</td>
<td id="71">04</td>
<td id="72">07</td>
<td id="73">12</td>
<td id="74">00</td>
<td id="75">08</td>
</tr>
<tr>
<td>Total:</td>
<td></td>
<td id="total1">00</td>
<td id="total2">00</td>
<td id="total3">00</td>
<td id="total4">00</td>
<td id="total5">00</td>
</tr>
</table>
<p>Total: <span id="totalAll"></span>
</p>
</body>
</html>
Recently, I was charged with creating a fantasy football website for my group of friends, having minimal Javascript and HTML experience. I don't mind manually inputing data from the NFL website, but I thought it would be cool to have a script to automatically add up the numbers in the table. But, the code I wrote doesn't work. Nobody I know has any knowledge in Computer Science, and Ive turned to Google throughout the whole process. The browser console returns no errors. What I expect to happen is the total points from all of my tds for each week go into the week total at the bottom, and then the week totals be added up into the final total. What really happens is nothing. Half the time, when I change something, the page crashes.
I cant seem to get a JSfiddle to run without crashing on run-time, so im putting it into pastebin
http://pastebin.com/Wb3ENMZY
All the for loops at the end are temporary, to be taken down when the first part works.
Not too sure why your code wouldn't work in JSFiddle
Here's a fiddle with a work example of what you were trying to accomplish Demo
HTML
<table>
<thead>
<tr>
<th>Player</th>
<th>Position</th>
<th>Week 7</th>
<th>Week 8</th>
<th>Week 9</th>
<th>Week 10</th>
<th>Week 11</th>
</tr>
<thead>
<tbody>
<tr>
<td>Matt Ryan</td>
<td>QB</td>
<td id="01">11</td>
<td id="02">15</td>
<td id="03">00</td>
<td id="04">14</td>
<td id="05">14</td>
</tr>
<tr>
<td>Marshawn Lynch</td>
<td>RB</td>
<td id="11">06</td>
<td id="12">01</td>
<td id="13">09</td>
<td id="14">40</td>
<td id="15">12</td>
</tr>
<tr>
<td>Calvin Johsnon</td>
<td>WR</td>
<td id="21">00</td>
<td id="22">00</td>
<td id="23">00</td>
<td id="24">00</td>
<td id="25">00</td>
</tr>
<tr>
<td>Allen Hurns</td>
<td>WR</td>
<td id="31">00</td>
<td id="32">04</td>
<td id="33">23</td>
<td id="34">17</td>
<td id="35">05</td>
</tr>
<tr>
<td>A.J. Green</td>
<td>WR</td>
<td id="41">00</td>
<td id="42">00</td>
<td id="43">10</td>
<td id="44">02</td>
<td id="45">18</td>
</tr>
<tr>
<td>Julius Thomas</td>
<td>Tight End</td>
<td id="51">02</td>
<td id="52">02</td>
<td id="53">09</td>
<td id="54">18</td>
<td id="55">00</td>
</tr>
<tr>
<td>Matt Bryant</td>
<td>Kicker</td>
<td id="61">00</td>
<td id="62">03</td>
<td id="63">00</td>
<td id="64">15</td>
<td id="65">15</td>
</tr>
<tr>
<td>Texans</td>
<td>Defense</td>
<td id="71">04</td>
<td id="72">07</td>
<td id="73">12</td>
<td id="74">00</td>
<td id="75">08</td>
</tr>
<tr>
<td>Total:</td>
<td></td>
<td id="total1">00</td>
<td id="total2">00</td>
<td id="total3">00</td>
<td id="total4">00</td>
<td id="total5">00</td>
</tr>
</tbody>
</table>
<p>Total: <span id="totalAll"></span>
</p>
Note the addition of the <thead> and the <tbody> this is so we can easily select the body rows in JQuery
Code
//Make a list of values for each column
var sums = [0,0,0,0,0];
//Go through each row in the body of the table
$("tbody tr").each(function () {
//We start at 2 because thats the firs of the weeks columns
for(var i = 2; i <= 6; i++)
{
//Add the current column's value to the sum. Note we use :eq() selector to get the i'th column
sums[i-2] += parseInt($("td:eq("+i+")", this).html());
}
});
var total = 0;
//Go through each column sum totalling it and writing it to the appropriate column
for(var i = 0; i < sums.length; i++)
{
total += sums[i];
$("#total" + (i + 1)).html(sums[i]);
}
//Write the total
$("#totalAll").html(total);
From your original code
for (p = 0; i < numbers.length; p++) {
var total1 = 0;
$.each(numbers[0], function() {
total1 += this;
});
}
This was causing Javascript to loop forever. Your for loop will loop until i < numbers.length but i isn't defined here. You probably mean p there. After replacing the i with p it no longer looped forever but each column would have the same value, numbers[0] should be changed for each column you're parsing.
I'm still having issues with your original code even after fixing those errors though.