Develop Reference

How to make subtotal for each row in JavaScript?

I want to make a subtotal for each products that I have. I already create the codes and it's working well, but the problem is if there are two or more products, the price will only change the first product, not the second and the rest. So, how to make it dynamically with the rest of the product? Here's my code.
function priceTotal(value) {
var grandTotal = 0;
$('.subtotal').each(function() {
var qty = value;
var price = parseInt($('.price').text());
var subTotal = value * price;
grandTotal = grandTotal + subTotal;
// document.getElementById("subtotal").innerText = "Rp. " + subTotal.toLocaleString('en');
$(this).text("Rp. " + subTotal.toLocaleString('en'));
});
// document.getElementById("grandtotal").innerText = "Rp. " + grandTotal.toLocaleString('en');
$('.grandtotal').text("Rp. " + grandTotal.toLocaleString('en'));
}
$('.increment-btn').click(function(e) {
e.preventDefault();
var incre_value = $(this).parents('.quantity').find('.qty-input').val();
var value = parseInt(incre_value, 10);
value = isNaN(value) ? 0 : value;
if (value < 100) {
value++;
$(this).parents('.quantity').find('.qty-input').val(value);
}
priceTotal(value);
});
$('.decrement-btn').click(function(e) {
e.preventDefault();
var decre_value = $(this).parents('.quantity').find('.qty-input').val();
var value = parseInt(decre_value, 10);
value = isNaN(value) ? 0 : value;
if (value > 1) {
value--;
$(this).parents('.quantity').find('.qty-input').val(value);
}
priceTotal(value);
});
<table class="table">
<thead class="bg-transparent">
<tr>
<th scope="col" class="text-center">Thumbnail</th>
<th scope="col" class="text-center">Brand</th>
<th scope="col" class="text-center">Product</th>
<th scope="col" class="text-center">Size</th>
<th scope="col" class="text-center">Price</th>
<th scope="col" class="text-center">Quantity</th>
<th scope="col" class="text-center">Subtotal</th>
<th scope="col" class="text-center">Actions</th>
</tr>
</thead>
#foreach($cartlists as $cartlist)
<tbody class="bg-transparent" class="checkout_cart">
<tr class="cartpage">
<td class="text-center"><img src="{{asset('uploads/products/' . $cartlist->product->productimage)}}" width="100px;" height="100px;" alt="Image"></td>
<td class="text-center">{{$cartlist->product->brand->name}}</td>
<td class="text-center">{{$cartlist->product->productname}}</td>
<td class="text-center">{{$cartlist->product->productsize}}</td>
<td class="text-center">Rp. <span class="price" data-price="{{$cartlist->product->productprice}}">{{ $cartlist->product->productprice}}</span></td>
<td class="cart-product-quantity text-center" width="132px">
<div class="input-group quantity">
<div class="input-group-prepend decrement-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">-</span>
</div>
<input type="text" class="qty-input form-control text-center" maxlength="2" value="1">
<div class="input-group-append increment-btn changeQuantity" style="cursor: pointer">
<span class="input-group-text">+</span>
</div>
</div>
</td>
<td class="text-center">
<span class="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
</td>
<td class="text-center">
Delete
</td>
</tr>
</tbody>
#endforeach
</table>
</div>
<div class="text-left mt-3">
<h5 class="bold">Total: <span class="grandtotal"></span></h5>
<p>Delivery and discount will be calculated during the checkout process.</p>
</div>
Here's the result:

ID has to be unique, you have the same id="subtotal" in every row. Change it for class.
JS
function priceTotal(value) {
var grandTotal = 0;
$('.subtotal').each(function() {
// ^^
var qty = value;
var price = parseInt($("#price").text());
var subTotal = value * price;
grandTotal = grandTotal + subTotal;
$(this).text("Rp. " + subTotal.toLocaleString('en'));
// ^^^^^^^ $(this) instead of document.getElementByid
});
document.getElementById("grandtotal").innerText = "Rp. " + grandTotal.toLocaleString('en');
}
HTML
<td class="text-center">
<span class="subtotal">Rp. {{ number_format($cartlist->product->productprice)}}</span>
</td>
The same problem will be with other IDs in your foreach loop. There are #price and #qty-input.

Javascript for a list of html elements not working

I have a problem. i would like to display some elements of a table when user click on an span icon using javascript.
I don't find the problem. normally i should click on the icon and display the list of elements associated to the title. i verify and if a display all rows i have the good list by title.
my view is here:
#{
ViewData["Title"] = "CalendrierPFL";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<h1 class="text-center">Calendrier PFL</h1>
<br />
<!--https://www.w3.org/WAI/tutorials/tables/irregular/ Pour faire une table avec ce format-->
<table class="table table-bordered">
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr class="text-center">
<td rowspan="2">Zones</td>
<th colspan="2" scope="colgroup">Lundi</th>
<th colspan="2" scope="colgroup">Mardi</th>
<th colspan="2" scope="colgroup">Mercredi</th>
<th colspan="2" scope="colgroup">Jeudi</th>
<th colspan="2" scope="colgroup">Vendredi</th>
<th colspan="2" scope="colgroup">Samedi</th>
<th colspan="2" scope="colgroup">Dimanche</th>
</tr>
<tr>
#for (int i = 0; i < 7; i++)
{
<th scope="col">Matin</th>
<th scope="col">Aprèm</th>
}
</tr>
#for (int j = 0; j < Model.InfosZoneCalendrier.Count(); j++)
{
<tr>
<th scope="row">
#Model.InfosZoneCalendrier[j].NomZone
<span class="fas fa-caret-down" onclick="showEquipements(#Model.InfosZoneCalendrier[j].NomZone)"></span>
</th>
#for (int y = 0; y < Model.InfosZoneCalendrier[j].ListEquipements.Count(); y++)
{
<tr class="hide" style="display:none" id="#Model.InfosZoneCalendrier[j].ListEquipements[y]" name="#Model.InfosZoneCalendrier[j].NomZone" >
<th style="color:gray">#Model.InfosZoneCalendrier[j].ListEquipements[y]</th>
</tr>
}
</tr>
}
</table>
#section Scripts
{
<!-- JS includes -->
<script type="text/javascript">
function showEquipements(parameter) {
var div = document.getElementsByName(parameter);
var i;
for (i = 0; i < div.length; i++) {
if (div[i].style.display == "") {
div[i].style.display = "none";
} else {
div[i].style.display = "";
}
}
}
</script>
}
Thanks in advance for your help :)

Problem resolved if this can interest someone :)
<span class="fas fa-caret-down" onclick="showEquipements(#Model.InfosZoneCalendrier[j].*NomZone*)"></span>
at the place of NomZone i put an integer Id unique to difference each option. It works!
So i made like this:
<span class="fas fa-caret-down" onclick="showEquipements(#Model.ListResasZone[j].IdZone.ToString())"></span>

Display objects with the same key in one row

I got this objects
{"key":["0114","1","2013"],"values":["279"]},
{"key":["0114","1","2014"],"values":["235"]},
{"key":["0114","1","2015"],"values":["258"]},
{"key":["0114","1","2016"],"values":["274"]},
{"key":["0114","1","2017"],"values":["293"]}
0114 is a county in sweden.
1 is symbolizes men
2013... is the years
values is the amount of men born in ex. 2013
I want to display them like this:
How it looks right now:
How i'm displaying rightnow :
<div class="tabellWrapper">
<table class="kommunerMainWrapper" >
<thead>
<tr>
<td >Kommun</td>
<th >Kön</th>
<th >2013</th>
<th >2014</th>
<th >2015</th>
<th >2016</th>
<th >2017</th>
</tr>
</thead>
<tbody class="kommunerWrapper" >
<template v-for="(data,index) in selectedLanData">
<tr v-if="data.key[1] ==='1'" :key="index">
<th class="kommunerItem kommun">{{data.key[0]}}</th>
<th class="kommunerItem sex" >Män</th>
<th class="kommunerItem numbers">{{data.values[0]}}</th>
<th class="kommunerItem numbers">{{data.key[2]}}</th>
</tr>
<tr v-else :key="index">
<th class="kommunerItem kommun">{{data.key[0]}}</th>
<th class="kommunerItem sex" >Kvinnor</th>
<th class="kommunerItem numbers">{{data.values[0]}}</th>
<th class="kommunerItem numbers">{{data.key[2]}}</th>
</tr>
</template>
</tbody>
</table>
</div>
</div>

I think you should parse your data array before. If it is a possibility for you, this could be the code:
var source = [
{"key":["0114","1","2013"],"values":["279"]},
{"key":["0114","1","2014"],"values":["235"]},
{"key":["0114","1","2015"],"values":["258"]},
{"key":["0114","1","2016"],"values":["274"]},
{"key":["0114","1","2017"],"values":["293"]}
];
var parsed = {};
for (var i=0; i<source.length; i++) {
var key = source[i].key;
if (!(source[i].key[0] in parsed)) {
parsed[source[i].key[0]] = {};
}
if (!(source[i].key[1] in parsed[source[i].key[0]])) {
parsed[source[i].key[0]][source[i].key[1]] = {};
}
if (!(source[i].key[2] in parsed[source[i].key[0]][source[i].key[1]])) {
parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] = 0;
}
parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] += parseInt(source[i].values);
}
console.log(parsed);

You can simply do it with the reduce function as so:
const data = [
{"key":["0114","1","2013"],"values":["279"]},
{"key":["0114","1","2014"],"values":["235"]},
{"key":["0114","1","2015"],"values":["258"]},
{"key":["0114","1","2016"],"values":["274"]},
{"key":["0114","1","2017"],"values":["293"]}
];
const tableRows = data.reduce((rows, value) => {
let currentRow = rows.find(row => row.region === value.key[0] && row.gender === value.key[1]);
if (!currentRow) {
currentRow = {region: value.key[0], gender: value.key[1]};
rows.push(currentRow);
}
currentRow[value.key[2]] = value.values[0];
return rows;
}, []);
console.log(tableRows);

Grid, Selecting Header_Id from one and Content values from another table and pushing "value with Id" in Array Jquery

what i have is a grid, that is formed with combination of two tables. One section contain Header contents and other values added by user. Below is problem statment.
I have a div inside which a table resides. That make Header of the grid.
Another div having table in it. That contain rows for values.
Demonstration:
<div class="k-grid-header-wrap">
<table role="grid" id="Header" cellspacing="0">
<thead>
<tr>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_47" data-title="Q1">Q1</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_48" data-title="Q2">Q2</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10048" data-title="Q3">Q3</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10049" data-title="Q4">Q4</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10050" data-title="Q5">Q5</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10051" data-title="Q7">Q7</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10052" data-title="Q8">Q8</th>
<th class="k-header" role="columnheader" data-field="ColumnID_20_17_10053" data-title="Q9">Q9</th>
<th class="k-header"></th>
</tr>
</thead>
</table>
</div>
<div style="height: 260px;" class="k-grid-content">
<table role="grid" id="tbl_1" cellspacing="0">
<tbody>
<tr class="" data-uid="a692c39b" role="row">
<td data-role="editable" class="" role="gridcell">1 </td>
<td data-role="editable" class="" role="gridcell">2</td>
<td data-role="editable" class="" role="gridcell">3</td>
<td data-role="editable" class="" role="gridcell">4</td>
<td data-role="editable" class="" role="gridcell">5</td>
<td data-role="editable" class="" role="gridcell">6</td>
<td data-role="editable" class="" role="gridcell">7</td>
<td data-role="editable" class="" role="gridcell">eight</td>
</tr>
</tbody>
</table>
</div>
Now what i want to do is against every row user enter in grid i want to push every grid cell values with ID to another table.
So forth what i have is:
function OnSave() {
var answerArray = [];
$("th[data-field*='_']").each(function () {
var Columnid = $(this).attr('data-field');
var Columntemp = Columnid.split('_');
var ColumnSection = Columntemp[1];
var ColumnQGroup = Columntemp[2];
var ColumnQuestion = Columntemp[3];
var ColumnRadiostatus = $(this).is(':checked');
var rowNum = $(this).parent().parent().index();
var ColumnValue;
$("#div1 table tbody tr").map(function (index, elem) {
// $('td', this).each(function () {
var tmp = $(this).find('td');
ColumnValue = $(tmp).val() || $(tmp).text();
if (!(ColumnValue instanceof Array))
{
ColumnValue = [ColumnValue];
}
answerArray.push(new clientAnswer(ColumnSection, ColumnQGroup, ColumnQuestion, ColumnRadiostatus, ColumnValue, rowNum));
//});
});
});
var serializedAnswers = Sys.Serialization.JavaScriptSerializer.serialize(answerArray);
PageMethods.UpdateAnswers(serializedAnswers, callBackUpdateAnswers);
}
function callBackUpdateAnswers(result) {
alert(result);
if (result == 'false') {
return false;
}
}
Which return whole row against every question.
Expected Output answerArray(20, 17, Q1, 1);
What's Now: answerArray(20, 17, Q1, 123456789);
Any Help would be appreciated. Regards

Following is solution for your issue:
function OnSave() {
var answerArray = [];
$("#Header th[data-field*='_']").each(function () {
var Columnid = $(this).attr('data-field');
var Columntemp = Columnid.split('_');
var ColumnSection = Columntemp[1];
var ColumnQGroup = Columntemp[2];
var ColumnQuestion = Columntemp[3];
var ColumnRadiostatus = $(this).is(':checked');
var rowNum = $(this).parent().parent().index();
var ColumnValue;
ColumnValue = $('#tbl_1 tr:eq(' + $(this).parent().index() + ') td:eq(' + $(this).index() + ')').text();
//alert("columnValue : " + ColumnValue);
if (!(ColumnValue instanceof Array)) {
ColumnValue = [ColumnValue];
}
answerArray.push(new clientAnswer(ColumnSection, ColumnQGroup, ColumnQuestion, ColumnRadiostatus, ColumnValue, rowNum));
});
var serializedAnswers = Sys.Serialization.JavaScriptSerializer.serialize(answerArray);
PageMethods.UpdateAnswers(serializedAnswers, callBackUpdateAnswers);
}
See Demo Here:
View Demo

How can I duplicate this in jQuery?

I have this code:
/* Modify the footer row to match what we want */
var nCells = nRow.getElementsByTagName('th');
nCells[1].innerHTML = iPageCPSV;
nCells[2].innerHTML = iPageCGV;
nCells[3].innerHTML = iPagePPSV;
nCells[4].innerHTML = iPagePGV;
It works just fine as it is. However I have added another <tr> into the section now. And I am having trouble figureing out how to populate the <th> in the second <tr>
<tfoot>
<tr style="background-color: #DDDDDD;">
<th align="right" colspan="6">
Page Total:
</th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
</tr>
<tr style="background-color: #DDDDDD;">
<th align="right" colspan="6">
Downline Total:
</th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
<th align="left"></th>
</tr>
</tfoot>
Before I added the second <tr> with more <th> everything worked. It still works, I just don't know how to populate the data into the second row. Can anyone help me modify the existing JavaScript or tell me how to duplicate it into jQuery?

Without jQuery...
var foot = nRow.getElementsByTagName('tfoot')[0];
foot.rows[0].cells[1].innerHTML = iPageCPSV;
foot.rows[0].cells[2].innerHTML = iPageCGV;
foot.rows[0].cells[3].innerHTML = iPagePPSV;
foot.rows[0].cells[4].innerHTML = iPagePGV;
foot.rows[1].cells[1].innerHTML = iPageCPSV;
foot.rows[1].cells[2].innerHTML = iPageCGV;
foot.rows[1].cells[3].innerHTML = iPagePPSV;
foot.rows[1].cells[4].innerHTML = iPagePGV;
Or with...
var foot = $('tfoot').first();
foot.children().each(function(i, row) {
row.cells[1].innerHTML = iPageCPSV;
row.cells[2].innerHTML = iPageCGV;
row.cells[3].innerHTML = iPagePPSV;
row.cells[4].innerHTML = iPagePGV;
});
A more modern solution...
var rows = nRow.getElementsByTagName('tfoot')[0].rows,
data = [iPageCPSV, iPageCGV, iPagePPSV, iPagePGV];
[].forEach.call(rows, function(el, i) {
data.forEach(function(item, ii) {
el.cells[ii + 1].innerHTML = item;
});
});
Since you need different data for each cell, I'd suggest putting it all in an Array, getting a collection of all the elements, and pairing the two...
var data = [iPageCPSV, iPageCGV, iPagePPSV, iPagePGV, 'foo', 'bar', 'baz', 'buz'];
$('tfoot > tr > th:not(:first-child)').html(function(i, el) {
return data[i];
});