Jquery problem in accessing information inside a var

Jquery problem in accessing information inside a var - javascript

This is what i have done so far i created a dropdown menu inside a table and based on selection from this menu i want to do some calculations and insert those calculation inside a table and here the problem begins i don't know how to access what someone picked inside this menu also i want to take the information from the table and use it for calculations
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
var vat = [{
display: "ZW",
value: "0"
}, {
display: "NP",
value: "0"
}, {
display: "0%",
value: "0"
}, {
display: "3%",
value: "0.03"
}, {
display: "8%",
value: "0.08"
}, {
display: "23%",
value: "0.023"
}];
var options = ['<option value="">Wybierz VAT</option>'];
for(var i = 0; i < vat.length; i++){
options.push('<option value="');
options.push(vat[i].value);
options.push('">');
options.push(vat[i].display);
options.push('</option>');
}
$('.obliczvat').html(options.join('')).change(function(){
var val = $(this).val();
if(val[i].value ==0)
{
var ilosc = parseInt($('.ilosc',this).text(),10);
var brutto =parseInt($('.brutto',this).text(),10);
var ob = (brutto*ilosc);
$('.netto',this).text(ob);
}
else
{
}
});
});
</script>
this is the html portion
<table class="tabela">
<tr>
<th>Lp.</th>
<th>Opis</th>
<th>Ilość</th>
<th>VAT</th>
<th>Kwota Brutto</th>
<th>Wartość Netto</th>
<th>Wartość Brutto</th>
</tr>
<tr>
<td>1</td>
<td>Palety</td>
<td class="ilosc">2</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">2000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Modernizjacja sprzętu komputerowego</td>
<td class="ilosc">10</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">120</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>modernizacja biura</td>
<td class="ilosc">4</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">5000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>Paliwo</td>
<td class="ilosc">7</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">350</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Zakup nowego Samochódu do floty</td>
<td class="ilosc">1</td>
<td> <form name="Vat">
<select class="obliczvat"></select></form>
</td>
<td class="brutto">23753</td>
<td class="netto"></td>
<td></td>
</tr>
</table>

The expression $(this).val() results in a numeric value.
$(function () {
var vat = [
{
display: "ZW",
value: "0",
},
{
display: "NP",
value: "0",
},
{
display: "0%",
value: "0",
},
{
display: "3%",
value: "0.03",
},
{
display: "8%",
value: "0.08",
},
{
display: "23%",
value: "0.023",
},
];
var options = ['<option value="">Wybierz VAT</option>'];
for (var i = 0; i < vat.length; i++) {
options.push('<option value="');
options.push(vat[i].value);
options.push('">');
options.push(vat[i].display);
options.push("</option>");
}
$(".obliczvat")
.html(options.join(""))
.change(function () {
var val = $(this).val();
if (val == 0) {
var ilosc = parseInt($(this).closest("td").prev().text(), 10);
var brutto = parseInt($(this).closest("td").next().text(), 10);
var ob = brutto * ilosc;
$(this).closest("td").next().next().text(ob);
} else {
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabela">
<tr>
<th>Lp.</th>
<th>Opis</th>
<th>Ilość</th>
<th>VAT</th>
<th>Kwota Brutto</th>
<th>Wartość Netto</th>
<th>Wartość Brutto</th>
</tr>
<tr>
<td>1</td>
<td>Palety</td>
<td class="ilosc">2</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">2000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Modernizjacja sprzętu komputerowego</td>
<td class="ilosc">10</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">120</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>modernizacja biura</td>
<td class="ilosc">4</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">5000</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>Paliwo</td>
<td class="ilosc">7</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">350</td>
<td class="netto"></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>Zakup nowego Samochódu do floty</td>
<td class="ilosc">1</td>
<td>
<form name="Vat">
<select class="obliczvat"></select>
</form>
</td>
<td class="brutto">23753</td>
<td class="netto"></td>
<td></td>
</tr>
</table>

Related

jQuery: how to empty repeated table tds content that have same attribute value but keep the content of the first added tds

I have the following table structure (please find it below) and I am looking to empty duplicated content of only tds with class check that have same value of attribute value but keep the first added td.
The table rows are added based on a slider value change event in some nested loops (hence duplicates and so I am emptying outside the loops and after rows are added but still inside some dynamic code).
In the shown table, the desired result after filtering should include only the content of one td with value = "1", one td with value = "2" and one td with value = "3". I tried the solution shown on the table code below but it did not give correct results. I also tried this and this but the result is not exactly what I am looking for.
Thanks for any ideas.
List item
jQuery snippets:
var seen = {};
$('.check').each(function() {
var txt = $(this).attr('value');
if (seen[txt])
$(this).empty();
else
seen[txt] = true;
});
var map = {};
$(".check").each(function() {
var value = $(this).attr('value');
if (map[value] == null) {
map[value] = true;
} else {
$(this).empty();
}
});
var seen = '';
$('.check').each(function() {
var see = $(this).attr('value');
if (seen.match(see)) {
$(this).empty();
} else {
seen = seen + $(this).text();
}
});
var seen = {};
$('.check').each(function() {
var $this = $(this);
if (seen[$this.attr('value')]) {
$this.closest("tr").next("tr").find("td.check").empty();
} else {
seen = seen + $this.text();
}
});
var seen = {};
$('.check').each(function() {
var $this = $(this);
if (seen[$this.attr('value')]) {
$this.closest("tr").next("tr").find(".check").empty();
} else {
seen[$this.attr('value')] = true;
}
});
My Table: (Fiddle)
(the orders of rows is irrelevant as I want to keep the first added content and remove the content that has same duplicated value of attribute value shown as: empty this)
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 4px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
var seen = {};
$('.check').each(function() {
var $this = $(this);
if (seen[$this.attr('value')]) {
$this.closest("tr").next("tr").find("td.check").empty();
} else {
seen[$this.attr('value')] = true;
}
});
});
});
</script>
</head>
<body>
<table>
<tbody>
<tr>
<th>New ID</th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Build</th>
<th>Pay</th>
<th>Date</th>
<th>From</th>
<th>To</th>
<th>Max</th>
<th>Used ID</th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Name</th>
<th>Phone</th>
<th>Cell</th>
<th>Email</th>
<th>Address</th>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="1">1<br />View</td>
<td class="check" value="1">text1</td>
<td class="check" value="1">text1</td>
<td class="check" value="1">text1</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="2">2<br />View</td>
<td class="check" value="2">text2</td>
<td class="check" value="2">text2</td>
<td class="check" value="2">text2</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="3">3<br />View</td>
<td class="check" value="3">text3</td>
<td class="check" value="3">text3</td>
<td class="check" value="3">text3</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="2">empty this</td>
<td class="check" value="2">empty this</td>
<td class="check" value="2">empty this</td>
<td class="check" value="2">empty this</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
</tbody>
</table>
<br>
<button>Click</button>
</body>
</html>

Look if this solution can be fine for your needs.
I used a first loop on <tbody> rows (<tr>) and - for each row - a nested loop on <td> elements.
Just a side note about your HTML: table headers shoud stay semantically inside a <thead>, not <tbody>.
$(document).ready(function() {
$("button").click(function() {
let seen = [];
// loop on rows
$('.table tbody tr').each(function(rowIndex, rowElement) {
// for each row, loop on tds with value attribute
$(rowElement).find('td.check[value]').each(function(tdIndex, tdItem) {
const attrValue = $(tdItem).attr('value'); // check value attribute
if (!seen.includes(attrValue)) {
// if attribute value is not present in array, push it
seen.push(attrValue);
// and break the tds loop in this row
return false;
} else {
// else empty tds
$(tdItem).empty();
}
})
})
})
})
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table'>
<thead>
<tr>
<th>New ID</th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Build</th>
<th>Pay</th>
<th>Date</th>
<th>From</th>
<th>To</th>
<th>Max</th>
<th>Used ID</th>
<th>Year</th>
<th>Make</th>
<th>Model</th>
<th>Name</th>
<th>Phone</th>
<th>Cell</th>
<th>Email</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="1">1<br />View</td>
<td class="check" value="1">text1</td>
<td class="check" value="1">text1</td>
<td class="check" value="1">text1</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="2">2<br />View</td>
<td class="check" value="2">text2</td>
<td class="check" value="2">text2</td>
<td class="check" value="2">text2</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td class="check" value="1">empty this</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="3">3<br />View</td>
<td class="check" value="3">text3</td>
<td class="check" value="3">text3</td>
<td class="check" value="3">text3</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
<tr>
<td>id</td>
<td>year</td>
<td>make</td>
<td>model</td>
<td>build</td>
<td>pay</td>
<td>date</td>
<td>from</td>
<td>to</td>
<td>max</td>
<td class="check" value="2">empty this</td>
<td class="check" value="2">empty this</td>
<td class="check" value="2">empty this</td>
<td class="check" value="2">empty this2</td>
<td>name</td>
<td>phone</td>
<td>cell</td>
<td>email</td>
<td>address</td>
</tr>
</tbody>
</table>
<button>Click</button>

How do I sum all columns in a table with the same classname in JavaScript?

I am trying to sum a price in a table, all the prices in the <td> have the same class name and I'd like to sum them up on a button click. I would eventually like to calculate the quantity into the total as well. This is what I have so far:
function sumAmounts() {
var sum = 0;
var listPriceTotal = $('.txtListPrice').each(function() {
sum += parseFloat($(this).html); // Or this.innerHTML, this.innerText
});
document.getElementById("txtTotal").value = listPriceTotal;
}
document.getElementById("addTotals").addEventListener("click", () => {
sumAmounts();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th><label>SKU</label></th>
<th><label>Retail Price</label></th>
<th><label>List Price</label></th>
<th><label>Product Name</label></th>
<th><label>Quantity</label></th>
</tr>
<tr>
<td class="txtSKU">1234</td>
<td class="txtRetailPrice">12.50</td>
<td class="txtListPrice">11.75</td>
<td class="txtProductName">product 1</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tr>
<td class="txtSKU">12222</td>
<td class="txtRetailPrice">14.50</td>
<td class="txtListPrice">9.75</td>
<td class="txtProductName">product 2</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tfoot>
<th><label id="lblTotal">Total:</label><input type="text" name="txtTotal" id="txtTotal">
<input type="button" value="Add" id="addTotals">
</th>
</tfoot>
</table>

There's two issues in your code. Firstly you're trying to set a jQuery object as the value of the input, which is why you see [Object object] in the field. You need to set the value to sum.
The second issue is that you're supplying the html method reference to parseFloat(), not the actual html() value. With both of those addressed, the code works:
function sumAmounts() {
var sum = 0;
$('.txtListPrice').each(function() {
sum += parseFloat($(this).html());
});
document.getElementById("txtTotal").value = sum;
}
document.getElementById("addTotals").addEventListener("click", () => {
sumAmounts();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tr>
<th><label>SKU</label></th>
<th><label>Retail Price</label></th>
<th><label>List Price</label></th>
<th><label>Product Name</label></th>
<th><label>Quantity</label></th>
</tr>
<tr>
<td class="txtSKU">1234</td>
<td class="txtRetailPrice">12.50</td>
<td class="txtListPrice">11.75</td>
<td class="txtProductName">product 1</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tr>
<td class="txtSKU">12222</td>
<td class="txtRetailPrice">14.50</td>
<td class="txtListPrice">9.75</td>
<td class="txtProductName">product 2</td>
<td class="txtQuantity"><input type="text"> </td>
</tr>
<tfoot>
<th>
<label id="lblTotal">Total:</label>
<input type="text" name="txtTotal" id="txtTotal">
<input type="button" value="Add" id="addTotals">
</th>
</tfoot>
</table>

How to show table rows between two days?

I have a table. I want to show only table rows which match between two days
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>
I want to show rows between date 20-6-2019 to 22-6-2019.
20-6-2019 |Payment | Ajay | By cash|
21-6-2019 |Payment | Ajay |By cash |
22-6-2019 |Payment | Ajay |Tran |

As your data is getting from server , you should hidden table first by css . Then get data and send to javascript function as param I test with displayInterval as below
function displayInterval(from, to) {
$("#Table tbody tr td:first-child").each(function() {
var curDate = setJsDate($(this).html());
var froms =setJsDate(from);
var tos = setJsDate(to);
if(curDate >= froms && curDate <= tos) {
} else {
$(this).parent().hide();
}
});
$("#Table tbody").show();
}
function setJsDate(d) {
if(typeof d == "number" || typeof d == "undefined") return;
var pattern = d.split('-');
var dt = new Date(pattern[2]+"-"+pattern[1] + "-"+pattern[0]);
return dt.getTime();
}
displayInterval('20-06-2019','22-06-2019');
#Table tbody {
display : none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td>20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
<tr>
<td>23-06-2019</td>
<td> Payment </td>
<td class="table_account capitalize">ajay </td>
<td>By cash</td>
</tr>
</tbody>
</table>

<table id ="Table">
<thead>
<tr>
<th>Date</th>
<th>Name</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td> 20-06-2019</td>
<td> Payment </td>
<td >ajay </td>
<td>By cash</td>
</tr>
<tr>
<td>21-06-2019</td>
<td> Payment </td>
<td>ajay</td>
<td>By Cash</td>
</tr>
<tr>
<td>22-06-2019</td>
<td>Payment </td>
<td>ajay </td>
<td>Tran</td>
</tr>
</tbody>
</table>

sum time at multiple table with momentjs

I'm trying to sum time with momentjs.
Here is my JavaScript function :
function all_time()
{
$(".aaa").each(function() {
$this = $(this);
var total = moment().startOf('day');
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
$this.find(".totalseluruhjam").val(total.format("HH:mm"));
}
});
});
}
And Here is My HTML Table
<form method="POST" action="http://localhost:84/payroll2/dinas_audit/claim/1105321/AD0000002">
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-01</td>
<td class="jammasuk">
07:00:00 </td>
<td class="jampulang">
23:00:00 </td>
<td class="lebih">08:00</td>
</tr>
<tr>
<td>2</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-02</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>3</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-03</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="aaa table">
<thead>
<tr>
<td> No </td>
<td> Full Name </td>
<td> Attendance Date </td>
<td> In Time </td>
<td> Out Time </td>
<td> Waktu Lebih </td>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-04</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
18:21:00 </td>
<td class="lebih">01:21</td>
</tr>
<tr>
<td>5</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-05</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
20:21:00 </td>
<td class="lebih">03:21</td>
</tr>
<tr>
<td>6</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-06</td>
<td class="jammasuk">
09:00:00 </td>
<td class="jampulang">
21:21:00 </td>
<td class="lebih">04:21</td>
</tr>
<tr>
<td>7</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-07</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>8</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-08</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td>9</td>
<td>[1105321] - AL SHIFAUL LATIFAH</td>
<td>2016-09-09</td>
<td class="jammasuk">
- </td>
<td class="jampulang">
- </td>
<td class="lebih">00:00</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Total Jam Lebih</td>
<td>
<input name="jamlebih" type="text" readonly disabled class="jmljam" />
</td>
</tr>
<tr>
<td colspan="4"> </td>
<td>Ro Yang DiDapatkan</td>
<td>
<input name="dapetro" type="text" readonly class="ronya" />
</td>
</tr>
</tbody>
</table>
<table class="table">
<tr>
<td> Total Jam Lebih : </td><td><input type="text" readonly="readonly" class='totalseluruhjam'/></td>
</tr>
<tr>
<td> Total RO Yang Di Dapat : </td><td><input type="text" readonly="readonly" class='totalseluruhro'/></td>
</tr>
</table>
</div>
<div class="box-footer">
<input value='submit' type='submit' class='btn btn-success pull-right claim'> </div>
</div>
</div>
</form>
As you can see from above. I have multiple tables. I'm able to sum .totalseluruhro` with this js
function all_ro()
{
var sum=0;
$(".aaa").each(function() {
$this = $(this);
sum += parseFloat($this.find('.ronya').val());
$('.totalseluruhro').val(sum);
})
}
But now i'm trying to sum every .jmljam and then set the result to .totalseluruhjam. I trying to sum jmljam with function all_time() but it's not working. I can't see any error from browser console. So, how to sum .jmljam ?
Please check my Fiddle https://jsfiddle.net/s9wfh9ye/23/

Give a shot with this.
function all_time()
{
var total = moment().startOf('day');
$(".aaa").each(function() {
$this = $(this);
$this.find('.jmljam').each (function() {
var value = $this.find(this).val();
var thisMoment = moment(value, 'HH:mm', true);
if(thisMoment.isValid()){
total.add(thisMoment);
}
});
});
$(".totalseluruhjam").val(total.format("HH:mm"));
}
and here is the updated fiddle https://jsfiddle.net/s9wfh9ye/24/

add sum of the a table with multiple header

I have drupal view that generate one table split to multiple table thead and tbody, I need to sum the total of the columns and rows per tbody and not for all the table
I have this code, see code here
HTML
<table id="sum_table" width="300" border="1">
<thead>
<tr class="titlerow">
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">1</td>
<td class="rowAA">2</td>
<td class="rowBB">3</td>
<td class="rowBB">4</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">11</td>
<td class="rowAA">22</td>
<td class="rowBB">33</td>
<td class="rowBB">44</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
<thead>
<tr class="titlerow">
<td></td>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>Total By Row</td>
</tr>
</thead>
<tbody>
<tr>
<td> Row1</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr>
<td> Row2</td>
<td class="rowAA">111</td>
<td class="rowAA">222</td>
<td class="rowBB">333</td>
<td class="rowBB">444</td>
<td class="totalRow"></td>
</tr>
<tr class="totalColumn">
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
<td class="totalCol"></td>
</tr>
</tbody>
</table>
CSS
#sum_table {
white-space: nowrap;
}
#sum_table td {
padding: 5px 10px;
}
JavaScript in onLoad
$("#sum_table tr:not(:first,:last) td:last-child").text(function(){
var t = 0;
$(this).prevAll().each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return t;
});
$("#sum_table tr:last td:not(:first,:last)").text(function(i){
var t = 0;
$(this).parent().prevAll().find("td:nth-child("+(i+2)+")").each(function(){
t += parseInt( $(this).text(), 10 ) || 0;
});
return "Total: " + t;
});
How can I sum total after every category?
Thanks a lot

Here is a FIDDLE that does most of what you want.
I just saw your comment about the totals after every tbody...I'll have to work on it a bit more. Still doable.
JS
var totrow = 0, totcol=0; //setting totalsforrow and totalsforcolumns variables to zero
$('.numrow').each( function(){ //for each of the rows with class='numrow'
for(var n=1; n<5; n++) //do a loop four times for the right column totals
{
totrow = totrow + parseInt( $(this).children("td:eq("+ n +")").text() );
} //grab the values of each of the four tds and add them together
$( $(this).children('td:eq(5)') ).html(totrow); //put the summed value in the 'total' td
totrow = 0; // reset the value for the next "each .numrow"
});
for(var m = 1; m < 5; m++) //for loop for four column totals
{
$('.numrow').each( function(){ // for each of the rows with class .numrow
totcol = totcol + parseInt($(this).children("td:eq("+ m +")").text() );//add up values
console.log(totcol); // just a view of the totcol printed to the console log
});
$( "#sum_table tr:eq(11) td:eq(" + m + ")" ).html( 'Col total: ' + totcol );//put total at bottom of column
totcol = 0; //reset total to get read for the next loop
}
Edit: Here's the update FIDDLE. It's brute-force, inelegant, but it works.

Develop Reference

JavaScript is the programming language of the Web.

Jquery problem in accessing information inside a var - javascript

Related

jQuery: how to empty repeated table tds content that have same attribute value but keep the content of the first added tds

How do I sum all columns in a table with the same classname in JavaScript?

How to show table rows between two days?

sum time at multiple table with momentjs

add sum of the a table with multiple header

Categories

Resources