I've got table structure like this:
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td class="price"></td>
(...)
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price"></td>
(...)
<td></td>
</tr>
(...)
<tr>
<td></td>
<td></td>
<td class="price"></td>
(...)
<td></td>
</tr>
</tbody>
I just want to pull every td price value and sum it up. At the end i just need an variable with total value.
Using map() and reducing it to the sum:
var sum = $('td.price').map(function () {
return parseInt(this.innerHTML, 10)
}).get().reduce(function (a, b) {
return a + b;
});
var sum = $('td.price').map(function () {
return parseInt(this.innerHTML, 10);
}).get().reduce(function (a, b) {
return a + b;
});
console.log(sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td class="price">5</td>
(...)
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price">10</td>
(...)
<td></td>
</tr>
(...)
<tr>
<td></td>
<td></td>
<td class="price">20</td>
(...)
<td></td>
</tr>
</tbody>
<table>
Use jQuery each() to iterate over the td elements and make sure you use parseInt to avoid concatenating strings rather than summing
var sum = 0;
$('td.price').each(function(){
sum += parseInt($(this).text());
});
document.write('Sum is ' + sum);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td class="price">5</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price">10</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="price">20</td>
<td></td>
</tr>
</tbody>
<table>
Related
My table has nested rows in which the first rows should have the sum of the values of their children.
How can I insert the sum of months into their respective quarters, and also insert the sum of the quarters into their respective years?
Here's a jsfiddle with the expected result and what I have tried.
Here's another jsfiddle with an attempt to solve this using classes.
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
$('table tr').each(function() {
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
totalColumn += parseInt(num);
}
});
$('table tfoot td').eq(index).html(totalColumn.toString());
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Expected Result</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td>2022</td>
<td></td>
<td>12</td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td>9</td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td></td>
</tr>
<tr class="font-bold">
<td>2021</td>
<td></td>
<td>15</td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td>8</td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td></td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td>7</td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Here is a working version
I rely on Total Q in the first column, but a class might be safer like I did with year
$('table thead th').each(function(i) {
i += 1;
calculateColumn(i);
});
function calculateColumn(index) {
var totalColumn = 0;
let totalCell;
let yearCell;
$('table tr').each(function(i) {
if($(this).find("td").eq(0).hasClass('year')) yearCell = $(this).find("td").eq(index);
if($(this).find("td").eq(0).text().includes("Total Q")) totalCell = $(this).find("td").eq(index);
var num = $('td', this).eq(index).text();
if (!isNaN(num) && num.length !== 0) {
num = +num;
yearCell.text(+yearCell.text() + num)
totalCell.text(+totalCell.text() + num)
totalColumn += num;
}
});
$('table tfoot td').eq(index).html(totalColumn);
}
table {
width: 75%;
}
td {
text-align: center;
}
.year-one {
background-color: lightgray;
}
.font-bold {
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
<tr class="year-one font-bold">
<td class="year">2022</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>Jan</td>
<td>2</td>
<td>3</td>
</tr>
<tr class="year-one">
<td>Mar</td>
<td>1</td>
<td>4</td>
</tr>
<tr class="year-one">
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr class="year-one">
<td>May</td>
<td>9</td>
<td>11</td>
</tr>
<tr class="font-bold">
<td class="year">2021</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Total Q1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>Jan</td>
<td>2</td>
<td>6</td>
</tr>
<tr>
<td>Mar</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>Total Q2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>May</td>
<td>7</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr class="font-bold">
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
i have tried to count number of dynamic rows in html table in which when counting the rows it is also counting table head and i want to display number of rows in a input box.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
var x = document.write(rowCount*280).innerHTML;
return(x);
document.getElementById("answer").value = x;
});
});
This code will count the number of rows in the table body and place the number of rows * 280 into the input element.
$(document).ready(function() {
$(".count").click(function() {
var rowCount = $("#tbpnr tr").length;
document.getElementById("count").textContent = rowCount;
document.getElementById("answer").value = rowCount * 280;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="tbpnr">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<button class="count">Count</button>
<br>
Number of rows:
<b id="count"></b>
<br>
Number of rows * 280:
<input id="answer" />
You can use jQuery itself for adding count in the input box.
Try the below code for displaying count inside input.
$(document).ready(function(){
$(".count").click(function(){
// Select all the rows in the table
// and get the count of the selected elements
var rowCount = $("#tbpnr tr").length;
$("#answer").attr("value", rowCount*280)
});
});
Please add HTML of the table for addressing the table header count issue.
I have the following table:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>
<table id="ccTransactions" class="table table-bordered">
<tbody>
<tr>
<td>Timestamp</td>
<td>Transaction</td>
<td>In</td>
<td>Out</td>
<td>Balance</td>
</tr>
<tr>
<td>06/02/2018</td>
<td>Card Sale</td>
<td>+£16.98</td>
<td></td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>Card Sale</td>
<td>+£14.10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>Total: </td>
<td>Total: </td>
<td>Final: £1334.05</td>
</tr>
</tfoot>
</table>
The table is being create when I supply a start and end date. It can only get the final balance for the end date selected. My question is, is there a way to populate the balance rows based on the final balance value that I have? Also, how can I add up the total amount from the in and out columns and display them in the table footer?
Update:
I've used this code to add up the out values. It worked on a different table where there where no empty rows, but doesn't work on this one.
var currencySymbol = '-£'
var total = 0.0;
$('table tbody tr:gt(0) td:nth-child(4)').each(function() {
total += parseFloat($(this).html().replace(currencySymbol, ''));
});
var $newTR = $("<tr><td colSpan='3'></td><td>Total: £"+total.toFixed(2)+"</td><td></td></tr>");
const priceToNumber = number => +number.replace(/(^[-+£]*)([0-9]*[?.][0-9]{0,2})/g, '$2')
const getHeaderIndex = column => {
let i
$('#headers td').each((index, h) => {
if($(h).data('column') === column) {
i = index
}
})
return i
}
const filterDatumByIndex = (data, index) => {
let arr = []
data.each(dataArray => {
[...data[dataArray]].forEach((child, i) => {
if(i === index) {
arr.push(child)
}
})
})
return arr
}
let dataSets = $('#data > tr').map((i, { children }) => children)
const getInBalance = () => {
let ins = filterDatumByIndex(dataSets, getHeaderIndex('IN'))
return ins.reduce((prev, {innerHTML}) => prev + priceToNumber(innerHTML), 0)
}
const getOutBalance = () => {
let ins = filterDatumByIndex(dataSets, getHeaderIndex('OUT'))
return ins.reduce((prev, {innerHTML}) => prev + priceToNumber(innerHTML), 0)
}
const getCurrentBalance = () => (getInBalance() - getOutBalance())
console.log(getInBalance())
console.log(getOutBalance())
console.log(getCurrentBalance()) //populate total with this method
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ccTransactions" class="table table-bordered">
<tr id="headers">
<td>Timestamp</td>
<td>Transaction</td>
<td data-column="IN">In</td>
<td data-column="OUT">Out</td>
<td>Balance</td>
</tr>
<tbody id="data">
<tr>
<td>06/02/2018</td>
<td>Card Sale</td>
<td>+£16.98</td>
<td></td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>06/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>Card Sale</td>
<td>+£14.10</td>
<td></td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
<tr>
<td>05/02/2018</td>
<td>cash fee</td>
<td></td>
<td>-£0.50</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>Total: </td>
<td>Total: </td>
<td>Final: £1334.05</td>
</tr>
</tfoot>
</table>
This is html page, which contains JavaScript and HTML code.
In this, if I select '1' then it will show the table which match with the id '1'.
The question is:
If I change the value into '2', will it still keep the table value for '1' and afterwards adds value for number '2' to the table ?
<html>
<head>
<scripttype="text/javascript">
window.onload =functionmyfunction(val){
vareSelect=document.getElementById('transfer_reason');
varoptOtherReason=document.getElementById('otherdetail');
varoptOtherReason1=document.getElementById('otherdetail1');
varoptOtherReason2=document.getElementById('otherdetail2');
varoptOtherReason3=document.getElementById('otherdetail3');
varoptOtherReason4=document.getElementById('otherdetail4');
varoptOtherReason5=document.getElementById('otherdetail5');
eSelect.onchange=function()
{ if(eSelect.selectedIndex===0)
{
optOtherReason.style.display='block';
}
elseif(eSelect.selectedIndex===1)
{
optOtherReason1.style.display='block';
}
elseif(eSelect.selectedIndex===2)
{
optOtherReason2.style.display='block';
}
elseif(eSelect.selectedIndex===3)
{
optOtherReason3.style.display='block';
}
elseif(eSelect.selectedIndex===4)
{
optOtherReason4.style.display='block';
}
elseif(eSelect.selectedIndex===5)
{
optOtherReason5.style.display='block';
}
else
{
optOtherReason.style.display='none';
}
}
}
</script>
</head>
<body>
<selectid="transfer_reason"name="transfer_reason"onchange="myfunction(this.value);">
<optionvalue="1">1</option>
<optionvalue="2">2</option>
<optionvalue="3">3</option>
<optionvalue="4">4</option>
<optionvalue="5">5</option>
<optionvalue="6">6</option>
<optionvalue="other">OtherReason</option>
</select>
<divid="otherdetail"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail1"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail2"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail3"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail4"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<divid="otherdetail5"style="display:none;">
<tableborder="2"width="300"height="20">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>
you need to hide all tables at the start of myfunction like below
function myfunciton()
{
// hide all tables first
optOtherReason1.style.display='none';
optOtherReason2.style.display='none';
optOtherReason3.style.display='none';
optOtherReason4.style.display='none';// hide all tables whatever you have
}
Try to reset the values before you set / update the new value.
Example idea
Set Table1 to block
Change to 2
Set Table1 to none
Set Table2 to block
...
This is my bootstrap table.I want to insert data into table using jQuery only.On clicking a particular cell,a textbox should be open to enter data.I don't want to use any other plugin.
<table class="table table-bordered">
<thead class="mbhead">
<tr class="mbrow">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
help me.thanx.
You basically want to add an event to the user clicking on a table row. In jQuery you can add that event like this
$("table.table tr td").bind("click", dataClick);
In the dataClick function you wan to make the row editable. You can do so like this.
function dataClick(e) {
console.log(e);
if (e.currentTarget.innerHTML != "") return;
if(e.currentTarget.contentEditable != null){
$(e.currentTarget).attr("contentEditable",true);
}
else{
$(e.currentTarget).append("<input type='text'>");
}
}
I have a sample here, http://jsfiddle.net/JPVUk/4/
Hope this helps