Develop Reference

I need to make the sum of an column in javascript [duplicate]

This question already has answers here:
How to sum a single table column using Javascript?
(3 answers)
How do I sum the price column from HTML table using JavaScript?
(4 answers)
Closed 1 year ago.
This is html code that i can't edit :
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Expense name</th>
<th scope="col">Value per unity (lei)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Water</td>
<td class="expense">62</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Netflix subscription</td>
<td class="expense">49.50</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Juice</td>
<td class="expense">16.40</td>
</tr>
<tr>
<th scope="row">4</th>
<td>New phone</td>
<td class="expense">2599</td>
</tr>
</tbody>
</table>
<h2>
Total expenses this month (lei):
<div id="total-expenses"></div>
</h2>
My question is :
How do i do that in code(javascript)?
I have something in my head but i don t know how to write that. What i have in head is: i declare variable for expenses,or using this queryselector(but i don t know how to point at specific td, because i have 2 td's in 1 tr) and after i can make a function with sum of that column, but i don't know how to write that in code. Can someone help me

First, you need to select all nodes that have .expense. Then you should iterate and calculate the total. After that write the total into #total-expenses.
// select nodes for expense
const expenceNodes = document.querySelectorAll('.expense');
let total = 0.0;
// calculating total
expenceNodes.forEach(node => {
total += parseFloat(node.innerText);
})
// write total
document.getElementById('total-expenses').innerText = total.toFixed(2);
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Expense name</th>
<th scope="col">Value per unity (lei)</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Water</td>
<td class="expense">62</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Netflix subscription</td>
<td class="expense">49.50</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Juice</td>
<td class="expense">16.40</td>
</tr>
<tr>
<th scope="row">4</th>
<td>New phone</td>
<td class="expense">2599</td>
</tr>
</tbody>
</table>
<h2>
Total expenses this month (lei):
<div id="total-expenses"></div>
</h2>

jquery get values from table from two columns at the same time to operate

i'm struggling trying to perform the following operation:
I've this table:
<table id="saleDetails" class="table table-hover table-condensed">
<thead>
<tr>
<th>Code </th>
<th>Description </th>
<th>Price </th>
<th>Quantity </th>
</tr>
</thead>
<tbody>
<tr>
<th> 001 </th>
<th> One description </th>
<th> 30.5 </th>
<th> <input type="number"></input> </th>
</tr>
<tr>
<th> 002 </th>
<th> Some description </th>
<th> 120 </th>
<th> <input type="number"></input> </th>
</tr>
<tr>
<th> 003 </th>
<th> Other description </th>
<th> 300.5 </th>
<th> <input type="number"></input> </th>
</tr>
</tbody>
</table>
what i'm trying to do is get the unitPrice and multiply it by the quantity input value to get the subtotal for each line.
i got the unitPrice with this sentence for each cell in column 3:
$('#saleDetails tr td:nth-child(3)').each(function () {
console.log( $(this).text() );
});
but i would like to perform the operation unitPrice * quantity (quantity is a input component) and i'm not sure how get the unitPrice and quantity at the same time (I'm not sure if that's possible) for each iteration on the table.
Any help will be welcome.
Thanks.

You can do something like this:
$('#saleDetails tr').each(function () {
var price = $(this).find("td:nth-child(3)").text()
var quantity = $(this).find("td:nth-child(4) input").val()
console.log( quantity + " " + price);
});

You can use DOM traversal method to target the input. Use .closest() to traverse up to TR element the use .find() to target the input
$('#saleDetails tr td:nth-child(3)').each(function () {
var quantity = $(this).closest('tr').find('input').val();
console.log( $(this).text(), quantity );
});
$('#saleDetails tr td:nth-child(3)').each(function() {
var quantity = $(this).closest('tr').find('input').val();
console.log($(this).text().trim(), quantity);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="saleDetails" class="table table-hover table-condensed">
<thead>
<tr>
<th>Code </th>
<th>Description </th>
<th>Price </th>
<th>Quantity </th>
</tr>
</thead>
<tbody>
<tr>
<td> 001 </td>
<td> One description </td>
<td> 30.5 </td>
<td> <input type="number" value="5" /></d>
</tr>
</tbody>
</table>
There are various method, you can also use
var quantity = $(this).closest('td').next().find('input').val();

Try this code by using class selector; jsfiddle
html:
<table id="saleDetails" class="table table-hover table-condensed">
<thead>
<tr>
<th>Code </th>
<th>Description </th>
<th>Price </th>
<th>Quantity </th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td> 001 </td>
<td> One description </td>
<td class="unitprice"> 30.5 </td>
<td> <input type="number" class="quantity" /> </td>
<td class="total"></td>
</tr>
<tr>
<td> 002 </td>
<td> Some description </td>
<td class="unitprice"> 120 </td>
<td> <input type="number" class="quantity" /> </td>
<td class="total"></td>
</tr>
</tbody>
</table>
and js:
$('#saleDetails tr').on("change", ".quantity", function (event) {
var $row = $(event.delegateTarget);
var price = $row.find(".unitprice").text();
var quantity = $row.find(".quantity").val();
var total = price*quantity;
$row.find(".total").text(total);
});

How to make two column to repeat for one item in the list?

Is there possible for the angular repeat to achieve that?Basically Im wondering there is a way to loop the 2 together? Really appreciate any help!
Controller:
$scope.date=[
{ID:1,Date:'2016-11-12'},
{ID:2,Date:'2016-11-15'},
{ID:3,Date:'2016-12-06'}
]
HTML:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
And I wish the column Bal and Order will repeat side by side under each date column.

You can use ng-repeat-start and ng-repeat-end which was introduced in Angular 1.2
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
Working example https://jsfiddle.net/9ve3fu0m/

You can accomplish this by using a nested table like this:
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">
<table border="1" >
<tr>
<th colspan="2">{{d.Date}}</th>
</tr>
<tr>
<th>Bal</th>
<th>Order</th>
</tr>
</table>
</th>
</tr>
</table>

You can use ng-repeat-start and ng-repeat-end
<table border="1" align="center">
<tr>
<th rowspan="2">ITEMCODE</th>
<th rowspan="2">DEBTORCODE</th>
<th colspan="2" ng-repeat="d in date">{{d.Date}}</th>
</tr>
<tr>
<th ng-repeat-start="d in date">Bal</th>
<th ng-repeat-end>Order</th>
</tr>

Javascript put first row in thead

Is it possible using javascript to move the first row as follows into a <thead> tag?
<table id="TBL1399802283490" class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh" style="cursor: pointer;">Server Name </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status </th>
</tr>
<tr>
<td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> READY </div> </td>
</tr>
</tbody>
</table>
Which becomes
<table id="TBL1399802283490" class="confluenceTable">
<thead>
<tr>
<th class="confluenceTh" style="cursor: pointer;">Server Name </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Network Zone </th>
<th class="confluenceTh" title="null" style="cursor: pointer;">Operational Status </th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><div style="left:1em;right:1em"> w264521f </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> GREEN </div> </td>
<td class="confluenceTd"><div style="left:1em;right:1em"> READY </div> </td>
</tr>
</tbody>
</table>
I'm not too familiar with Javascript, so any help is much appreciated!

This should work for the table given in your code, for a general table it's better to obtain the elements in more secure way.
var table = document.getElementById('TBL1399802283490');
var thead = document.createElement('THEAD');
var tbody = table.getElementsByTagName('TBODY')[0];
var tr = table.getElementsByTagName('TR')[0];
table.appendChild(thead);
tbody.removeChild(tr);
thead.appendChild(tr);

Find by clicking any cell or table data, its left and top headers

I have multiple column headers that spans of multiple column and I would like to find the correct header number/count for the columns. Also some of the table data have rowspan and colspan.
I want to be able to click any cell or table data and get its left and top headers.
So if I click the with "D9:LH1-TH4(H4a)" I should get:
Left Header is: LH1, Top Header1 is TH4 and Top Header 2 is H4a
And if I click the with "D3:LH2-TH2(H2b-H4a)" I should get:
Left Header is LH2, Top Header 1 is TH2 and Top Header 2 is H2b
Example:
<table width="200" border="1" style="background-color:#000; color:#FFF">
<tr>
<th scope="col"> </th>
<th colspan="2" scope="col"> TH1 </th>
<th colspan="4" scope="col"> TH2 </th>
<th colspan="6" scope="col"> TH4 </th>
</tr>
<tr>
<th scope="col"> </th>
<th scope="col"> H1a </th>
<th scope="col">H1b</th>
<th scope="col"> H2a</th>
<th scope="col">H2b</th>
<th scope="col">H2c</th>
<th scope="col">H2d</th>
<th colspan="6" scope="col"> H4a </th>
</tr>
<tr>
<th rowspan="3" scope="row"><span>LH1</span></th>
<td colspan="2" rowspan="3">D1:LH1-TH1(H1a-H1b)</td>
<td colspan="3" rowspan="2">D2:LH1-TH2(H2a-H2c)</td>
<td rowspan="3">D5:LH1-TH2(H2d)</td>
<td rowspan="3">D6:LH1-TH4(H2a-H2c)</td>
<td colspan="2">D7:LH1-TH4(H4a)</td>
<td>D8:LH1-TH4(H4a)</td>
<td rowspan="3">D13:LH1-TH4(H4a)</td>
<td rowspan="3">D14:LH1-TH4(H4a)</td>
</tr>
<tr>
<td colspan="3">D9:LH1-TH4(H4a)</td>
</tr>
<tr>
<td colspan="2">D3:LH1-TH2(H2a-H2b)</td>
<td>D4:LH1-TH2(H2c)</td>
<td>D10:LH1-TH4(H4a)</td>
<td>D11:LH1-TH4(H4a)</td>
<td>D12:LH11-TH4(H4a)</td>
</tr>
<tr>
<th scope="row"><span>LH2</span></th>
<td colspan="2" >D1:LH2-TH1(H1a-H1b)</td>
<td colspan="3">D2:LH2-TH2(H2a-H2c)</td>
<td colspan="5">D3:LH2-TH2(H2b-H4a)</td>
<td>D4:LH2-TH4(H4a)</td>
<td>D5:LH2-TH4(H4a)</td>
</tr>
</table>​
Please see this link

That was annoyingly tricky.
you can find your headers by using the parent offsets.
got it working in this fiddle
http://jsfiddle.net/work4liberty/fk6sy/14/

$('td')​.on('click', function() {
var text = $(this).text().split(':')[1],
LH = text.split('-')[0],
TH = text.split('-')[1].split('(')[0],
TH2 = text.split('-')[1].split('(')[1];
console.log('Left header is '+LH+', Top header 1 is '+TH+' and Top header 2 is '+TH2)
})​;​
FIDDLE