I have a basic table with names and prices generated according to buttons in the website. I need to compute the total for this table.
<table id="countit">
<tr>
<th >name</th>
<th >price</th>
</tr>
<tr>
<td id ="name"></td> //this is dynamically generated through buttons
<td id ="price" ></td> //this is dynamically generated through buttons
</tr>
<tr>
<th >total</th>
<th id="grandtotal" ></th> //total goes here
</tr>
</table>
Can anyone tell me how to do it in Javascript, please?
Click here for Fiddle
<table id="countit" border="1">
<tr>
<th >name</th>
<th >price</th>
</tr>
<tr>
<td id ="name">aaa</td>
<td name="price">10</td>
</tr>
<tr>
<td id ="name">bbb</td>
<td name="price">20</td>
</tr>
<tr>
<td id ="name">ccc</td>
<td name="price">30</td>
</tr>
<tr>
<th >total</th>
<th id="grandtotal" ></th>
</tr>
</table>
<script>
var tds = document.getElementsByName("price");
var total = 0;
for(var i=0; i<tds.length; i++)
total += parseInt(tds[i].innerHTML);
document.getElementById('grandtotal').innerHTML=total;
</script>
<tr>
<td id ="name"></td>
<td name ="price" ></td>
</tr>
If you are generating table rows from any back-end language then provide a common value to "name" attribute. Then from the javascript get these element using
var prices=getElementsByName('price');
for(i=0;i<prices.length;i++){
total = total+parseInt(prices[i].innerHTML);
}
once you get the total you can set this value to any element.
document.getElementById('grandTotal').innerHTML = total;
Related
How to apply JavaScript functions to HTML table by class to show 2 decimal places? The JavaScript
has to be applied onto a specific HTML table class "sal".
The table by default will have data from other sources in 4 5 or 6 decimal places which I need to output as 2 decimal places.
<html>
<head>
<script>
function myFunction() {
var num = document.getElementById("sal");
var n = num.toFixed(2);
document.getElementById("sal") = n;
}
onload = myFunction()
</script>
</head>
<body>
<table class="tg" border=2px;>
<thead>
<tr>
<th class="tg-hdr1">NAME</th>
<th class="tg-hdr2">SALARY</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-namehead">Andrew</td>
<td class="tg-sal">211785.678489</td>
</tr>
<tr>
<td class="tg-namehead">Pete</td>
<td class="tg-sal">525225.7789</td>
</tr>
<tr>
<td class="tg-namehead">Jack</td>
<td class="tg-sal">98958.489</td>
</tr>
</tbody>
</body>
</html>
Short solution using Number.prototype.toFixed(2):
document.querySelectorAll('.tg-sal').forEach((e)=>{
e.innerText = Number(e.innerText).toFixed(2);
})
<table class="tg" border=2px;>
<thead>
<tr>
<th class="tg-hdr1">NAME</th>
<th class="tg-hdr2">SALARY</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-namehead">Andrew</td>
<td class="tg-sal">211785.678489</td>
</tr>
<tr>
<td class="tg-namehead">Pete</td>
<td class="tg-sal">525225.7789</td>
</tr>
<tr>
<td class="tg-namehead">Jack</td>
<td class="tg-sal">98958.489</td>
</tr>
</tbody>
</table>
You can select a documents' elements by class name using document.getElementsByClassName(className).
var salaries = document.getElementsByClassName("tg-sal");
for (i = 0; i < salaries.length; i++) {
var currentValue = salaries[i].innerHTML;
var newValue = currentValue.substring(0, currentValue.indexOf(".") + 2);
salaries[i].innerHTML = newValue;
}
I have a table structure like:
<table id='myTable'>
<thead>
<tr>
<th class='name'>Name</th>
<th class='nick-name'>Nick Name</th>
<th class='age'>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td class='name'>Ilona</td>
<td class='nick-name'>Baby Doll</td>
<td class='age'>21</td>
</tr>
<tr>
<td class='name'>Sieraa</td>
<td class='nick-name'></td>
<td class='age'>24</td>
</tr>
<tr>
<td class='name'>Britney</td>
<td class='nick-name'>Blondie</td>
<td class='age'>27</td>
</tr>
<tr>
<td class='name'>Kate</td>
<td class='nick-name'>Night Queen</td>
<td class='age'>19</td>
</tr>
<tr>
<td class='name'>Dani</td>
<td class='nick-name'></td>
<td class='age'>23</td>
</tr>
<tr>
<td class='name'>Aliee</td>
<td class='nick-name'></td>
<td class='age'>26</td>
</tr>
<tr>
<td class='name'>Brandi</td>
<td class='nick-name'></td>
<td class='age'>27</td>
</tr>
</tbody>
</table>
As some Nick Name fields are empty, I want to display the value of Name in Nick Name if they are empty.
Eg: In Second Row of Table Body, The Nick Name field is empty, The Name field contains Sierra. So, I want to display Sierra in Nick Name field instead of leaving it empty.
How can I achieve this using jQuery or JavaScript
jQuery:
this only works when the .name is always the exact previous element of .nick-name like in your structure
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
$(this).text($(this).prev().text());
}
});
This works when both .name and .nick-name have the same parent
$('.nick-name').each(function () {
if ($(this).text().length === 0) {
var name = $(this).parent().find('.name').text();
$(this).text(name);
}
});
You should read up on DOM Traversing with jQuery, there is lots of stuff you can do to get to your elements.
jsfiddle: http://jsfiddle.net/sX4yj/
This should help
$('#myTable tr').each(function(){
var nickname = $(this).find('.nick-name').html();
alert(nickname);
});
Refer: How to get a table cell value using jQuery?
Lets say I have the following table:
<table>
<thead>
<tr>
<th id="th_00"> </th>
<th id="th_01">TH 01</th>
<th id="th_02">TH 02</th>
<th id="th_03">TH 03</th>
<th id="th_04">TH 04</th>
</tr>
</thead>
<tbody>
<tr>
<th id="th_10">TH 10</th>
<td headers="th_01 th_10">DATA 11</td>
<td headers="th_02 th_10">DATA 12</td>
<td headers="th_03 th_10">DATA 13</td>
<td headers="th_04 th_10">DATA 14</td>
</tr>
<tr>
<th id="th_20">TH 20</th>
<td headers="th_01 th_20">DATA 21</td>
<td headers="th_02 th_20">DATA 22</td>
<td headers="th_03 th_20">DATA 23</td>
<td headers="th_04 th_20">DATA 24</td>
</tr>
</tbody>
</table>
Is there any native way using JavaScript or jQuery to find a specific cell of data using the headers attribute and the th tags id, or will I have to build the functionality myself?
I am currently using regular expressions and a jQuery('td', 'table tbody').each() loop to retrieve the specific cells I need to use, although this is less than ideal as it loops through each cell individually.
var td = $('td[headers="th_01 th_10"]');
perhaps?
I have a simple table to simulate a Gantt chart. The idea is that each TD clicking trigger a sum of values stored in an hidden input text (an array of values), available in a TH (first son of TR tag). The row sum of these values, is shown on a final TD.
Next, the code table:
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr class="encabezado">
<th rowspan="2" scope="col" width="15%">Area</th>
<th colspan="7" scope="col">Month</th>
</tr>
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr class="encabezado">
<th scope="row">Total</th>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia"> </td>
<td class="total_dia">...</td>
<td class="total_dia"> </td>
</tr>
</tbody>
</table>
The array of values works as follows:
array [0]: Off;
array [1]: preoperative;
array [2]: Operating.
This is the jQuery code I use to differentiate cells that are pre-operational and operational. If a cell is inactive, the area is off:
$(document).ready(function() {
$('td.gantt').click(function() {
$(this).toggleClass('preop');
});
$('td.gantt').dblclick(function() {
$(this).toggleClass('operating');
});
});
Inactive TD always sum to the total. What I want to do? Simple:
1. That jQuery always sum TH input value[0], if the TD is not clicked (inactive).
2. When I click, or double click, a TD.gantt jQuery fetch the TH input value[1], and add it to the total.
If anyone can help with the whole problem, o a parcial, I would really appreciate.
Mixing "click" and "dblclick" is not going to work, at least not reliably. I suggest you re-work the interaction so that "click" cycles through your three different states.
To do the math you want to do (and I don't fully understand that), the basic problem is to get the <th> contents that correspond to the column that each clicked <td> is in. To get that, you'll have to find which child the <td> is of its parent <tr>, and then that will allow you to find the <th> (with the ":nth-child" selector, or the "eq" filter).
We have the following XHTML table:
<tr class="encabezado">
<th scope="col" width="2%">1</th>
<th scope="col" width="2%">2</th>
<th scope="col" width="2%">3</th>
<th scope="col" width="2%">4</th>
<th scope="col" width="2%">5</th>
<th scope="col" width="2%">...</th>
<th scope="col" width="2%">31</th>
</tr>
<tr>
<th scope="row">Area 1<input name="line_config" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
<tr>
<th scope="row">Area 2 <input name="line_config" type="hidden" value="0,0,10" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt">...</td>
<td class="gantt"> </td>
</tr>
When there is a click over a TD.gantt element, we want jQuery to get the value from input[name='line_config'] tag. We try the following jQuery code, but val() returned 'undefined':
$(document).ready(function() {
function sum_day(tag, status, column) {
var total_day = 0;
var index_pos = 0;
var values = 0;
values = tag.closest('tr').children("input[name='line_config']").val();
alert(values); //Return undefined
return total_day;
}
$('td.gantt').click(function() {
var gantt_tag = $('td.preop');
$(this).toggleClass('preop');
sum_day(gantt_tag, 'preop', $(this).index());
});
});
Are we getting right the value way? If anyone can help us, we appreciate... =)
Note jquery.children() will only return direct/immediate children, and since your input is not a direct/immediate child of the <TR> you will not get any of the inputs.
May I suggest something like this
$("input[name='line_config']", tag.closest('tr'))
children return the immediate children of the tr element. You should try by find i.e.:
values = tag.closest('tr').find("input[name='line_config']").val();
Not sure if this is the whole problem, but when you say var gantt_tag = $('td.preop');, there aren't any elements with the class of preop:
$('td.gantt').click(function() {
var gantt_tag = $('td.preop');
alert(gantt_tag.size()); // returns 0, i.e. no elements are matched
});