We Keep Coding

How to generate automatically the sum price of a dynamic table using jquery?

I'm making a web-based POS. I have two table, one is for displaying the search products using jquery and when I clicked the product it will transfer to the second table. So my second table is dynamically dependent of what the user clicked. This is my table look like with css.
I want to get the total price of Sub.Total column automatically and display to the bottom specially in the Total p tag.
This is my html table code.
<table id="table2">
<thead>
<tr>
<th>Barcode</th>
<th>Description</th>
<th>Price</th>
<th>Unit</th>
<th>Qty</th>
<th>Sub.Total</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
<table id="table1">
<thead>
<tr>
<td>Barcode</td>
<td>Product Name</td>
<td>Price</td>
<td>Unit</td>
<td>Stocks</td>
</tr>
</thead>
<tbody id="products">
</tbody>
</table>
This is my query from search box.
$show = "SELECT * FROM products WHERE product_name LIKE '$name%' ";
$query = mysqli_query($db,$show);
if(mysqli_num_rows($query)>0){
while($row = mysqli_fetch_array($query)){
echo "<tr class='js-add' data-barcode=".$row['id']." data-product=".$row['product_name']." data-price=".$row['sell_price']." data-unt=".$row['unit']."><td>".$row['id']."</td><td>".$row['product_name']."</td>";
echo "<td>₱".$row['sell_price']."</td>";
echo "<td>".$row['unit']."</td>";
echo "<td>".$row['quantity']."</td>";
}
}
This is for displaying the cliked rows from searched products.
$('body').on('click','.js-add',function(){
var target = $(this);
var product = target.attr('data-product');
var price = target.attr('data-price');
var barcode = target.attr('data-barcode');
var unit = target.attr('data-unt');
swal("Enter number of item to buy:", {
content: "input",
})
.then((value) => {
if (value == "") {
swal("Error","Entered none!","error");
}else{
var qtynum = parseInt(value);
if (isNaN(qtynum)){
swal("Error","Please input a valid number!","error");
}else{
var total = value * price;
$('#tableData').append("<tr><td>"+barcode+"</td
<td>"+product+"</td>
<td>"+accounting.formatMoney(price,{symbol:"₱",format: "%s %v"})+"</td><td>"+unit+"</td>
<td>"+value+"</td>
<td class='totalPrice'>"+accounting.formatMoney(total,{symbol:"₱",format: "%s %v"})+"</td>
<td><button class='btn btn-danger' type='button' id='delete-row'>&times</button><tr>");
}
}
});
});
I'd tried this code but it return NaN.
$(document).ready(function(){
var TotalValue = 0;
$("#tableData tr").each(function(){
TotalValue += parseFloat($(this).find('.totalPrice').text().replace(/,/g, "₱"));
});
alert(TotalValue);
});
I'd tried modifying the code but I cant get the job done. Hope someone will help about this one. Thanks in advance.

Edit: Updated answer.
Based off what you tried here would be a working solution using your logic.
$(document).ready(function(){
var TotalValue = 0;
var TotalPriceArr = $('.totalPrice').get()
$(TotalPriceArr).each(function(){
TotalValue +=parseInt($(this).text().replace('₱', ''))
});
alert(TotalValue);
});

Accessing Table in Partial View

I'm trying to edit a table by adding rows, but running into an issue with the the partial view not being fully rendered (This is my assumption)
I'm loading the partials into their divs via page load and ajax calls;
<div id="preTestSteps">
</div>
<div id="mainTestSteps">
</div>
<div id="postTestSteps">
</div>
Scripts;
$(document).ready(function() {
var testSuiteExecutionId = #(Model.TestSuiteExecutionId);
var testSuiteId = #(Model.TestSuiteId);
loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 1, "preTestSteps");
loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 0, "mainTestSteps");
loadTestStepResultsPartialView(testSuiteExecutionId, testSuiteId, 2, "postTestSteps");
});
function loadTestStepResultsPartialView( testSuiteExecutionId, testSuiteId, testStepType, divId) {
$.ajax({
type: 'POST',
url: '#Url.Action("DetailsTestStepResults", "TestSuiteExecutions")',
data: { 'testSuiteExecutionId': testSuiteExecutionId, 'testSuiteId': testSuiteId, 'testStepType': testStepType },
success: function(data) {
$("#" + divId).html(data);
}
});
In the partial view, the table has a unique ID which is accessed to append (view model is a list of viewmodels, using the first index is to get data which is unique for the list of logs);
<div id="#collapseStepItemName" class="collapse col-sm-12" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
<table class="table" id="logTable_#Model[0].TestStepId#Model[0].MessageType">
<thead>
<tr>
<th width="5%"></th>
<th width="20% !important">Time</th>
<th width="75%">Message</th>
</tr>
</thead>
<tbody>
#foreach (var logEntry in Model)
{
<tr id="tableRow_#logEntry.TestStepId#logEntry.MessageType">
<td><img width="20" height="20" src="~/Content/Images/#HtmlUtilities.GetTestSuiteExecutionIconName(logEntry.LogType)" /></td>
<td><i>#logEntry.TimeStamp</i></td>
<td><i>#Html.Raw(HtmlUtilities.GetHtmlFormattedString(logEntry.Message))</i></td>
</tr>
}
</tbody>
</table>
</div>
The current test code (with hard coded tableID for the sake of testing) is the following;
var tableId = "logTable_" + 44 + "False";
var newRow = document.getElementById(tableId).insertRow();
newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>";
The following error is thrown in the browser debug;
Uncaught TypeError: Cannot read property 'insertRow' of null
Is there a way to execute the script after the partial views are fully rendered? Or is this issue something else and not due to the views being loaded in?
I made sure the table appending script actually works by testing it on a table in the main view, and it worked as intended.

Since you're using jQuery, place this code inside document.ready function:
$(document).ready(function() {
// other stuff
var tableId = "logTable_" + #Model[0].TestStepId + #Model[0].MessageType;
var row = $('<tr>').append('<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>');
$('#' + tableId).find('tbody').append(row);
});
If you insist using vanilla JS to add rows, make sure that all DOM objects are already loaded as given in example below:
document.addEventListener("DOMContentLoaded", function (ev) {
var tableId = "logTable_" + #Model[0].TestStepId + #Model[0].MessageType;
var newRow = document.getElementById(tableId).insertRow();
newRow.innerHTML="<td>New row text</td><td>New row 2nd cell</td><td>Please work</td>";
}
The reason behind insertRow has null value is that table DOM elements may not fully loaded when adding row script executes, hence row addition script should run when all required DOM elements are complete.
Demo example: JSFiddle

appending <tr> dynamically as per the database output using AJAX

I am trying to attach multiple rows dynamically ( as per the results fetched from the database) to the existing table.
my html code
<table width="100%" border="1" class="queriedResponders">
<tbody>
<tr>
<th><strong>Select</strong></th>
<th><strong>Responder Name</strong></th>
<th><strong>Responder Company</strong></th>
<th><strong>Responder Number</strong></th>
<th><strong>City</strong></th>
<th><strong>Distance(Km)</strong></th>
</tr>
</tbody>
</table>
my jQuery code
$.ajax({
data: data,
url: url,
type: 'POST',
datatype: 'JSON',
success: function (response) {
console.log(response);
var result = $.parseJSON(response);
var count = result.length;
for (var i = 0; i < count; i++) {
var $row = $("<tr><td><input type='radio' name='assignRadio'></td><td>" + result[i].name + "</td><td> Murgency Global Network</td><td>" + result[i].number + "</td><td>" + result[i].city + "</td><td> 0.5 Km</td></tr>");
$('table.queriedResponder > tr:last').append($row);
}
console.log($row);
}
});
});
Please note :- I am getting the desired result as I have console logged the output which is a JSON object like 1 pasted below
[{"name":"mihir panchal","company":"","number":"00919664804737","city":""}]
Please guide me as to where am I making the mistake

2 things:
You are not referencing the correct element. Your table has a class of queriedResponders, and you are targeting queriedResponder
You should be append to the tbody instead of the tr
Both of those things combined results in this:
$('table.queriedResponders tbody:last').append($row);
I've simplified the response to get a working example:
var result = [{
"name": "mihir panchal",
"company": "",
"number": "00919664804737",
"city": ""
}];
var count = result.length;
for (var i = 0; i < count; i++) {
var $row = $("<tr><td><input type='radio' name='assignRadio'></td><td>" + result[i].name + "</td><td> Murgency Global Network</td><td>" + result[i].number + "</td><td>" + result[i].city + "</td><td> 0.5 Km</td></tr>");
$('table.queriedResponders tbody:last').append($row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" class="queriedResponders">
<tbody>
<tr>
<th><strong>Select</strong></th>
<th><strong>Responder Name</strong></th>
<th><strong>Responder Company</strong></th>
<th><strong>Responder Number</strong></th>
<th><strong>City</strong></th>
<th><strong>Distance(Km)</strong></th>
</tr>
</tbody>
</table>

You are appending the new row to the last tr while you want to append it in <tbody>
so you should replace it with
$('table.queriedResponders > tbody:last-child').append($row);
or if you want to use your last <tr> you may use .after() instead of .append() to add the new row after your last row
$('table.queriedResponders tr:last').after($row);
Solution1: Working Demo
Solution2: Working Demo

Add a <tr> element to dynamic table, dynamically without a page refresh, php jquery

I am trying to add a dynamic row to the existing table on click of button, whose rows are dynamically created using output from PHP script.
I doing an ajax call to the script insert_tr.php which returns me a TR element in the same format as the existing table with the data.Data is returned appropriately
But unfortunately, the <tr> row is not being added to the table dynamically but adds only after a page refresh.
PHP file code :
<div id="v_div">
<table class="table table-bordered table-striped" >
<thead>
<th class='col-md-2'>name</th>
<th class='col-md-2'>number</th>
</thead>
<tbody>
<?php
while ($data = pg_fetch_assoc($ret)) {
echo
"<tr id=tr_".$data['sr_number'].">
<td class='td_topic' id=title:".$data['number']." >".trim($data['name'])."</td>
<td class='td_topic' id=title:".$data['number']." >".trim($data['number'])."</td>
<td class='td_topic' id=title:".$data['number']." ><button class='btn btn-info check1' type=button title='Add Entry'>Add Entry</button></td>
</tr>";
?>
</tbody>
</table>
</div>
Javascript :
$(document).ready(function() {
$("#v_div").on('click', '.check1', function() {
var field_userid = $(this).parent().attr("id");
var value = $(this).text();
$.post('insert_tr.php', field_userid + "=" + value, function(data) {
if (data != '') {
$(this).closest("tr").after(data);
}
});
});
});
All I want to do is add the row immediately after the current TR am on ,dynamically without a page refresh, which serves the ultimate use of an ajax call.

The reference to this is not the button that was clicked.
$(this).closest("tr").after(data);
Store a reference to the row outside the Ajax call.
$(document).ready(function() {
$("#v_div").on('click', '.check1', function() {
var field_userid = $(this).parent().attr("id");
var value = $(this).text();
var row = $(this).closest("tr");
$.post('insert_tr.php', field_userid + "=" + value, function(data) {
if (data != '') {
row.after(data);
}
});
});
});

populating a bootstrap html table via jquery data

i just buil a data APIT trough Kimono -> https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m.
i would like to include it in a simple and nice bootstrap table, like this: http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html.
i just tried to insert the jquery code given by kimono
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
// do something with the data
// please make sure the scope of this function is global
}
$.ajax({
"url":"https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
but i didn't manage to create the table.
any advice?

you can active bootstrap table via javascript:
<table id="table">
<thead>
<tr>
<th data-field="nome" data-formatter="linkFormatter">Nome</th>
<th data-field="descrizione" data-formatter="linkFormatter">Descrizione</th>
</tr>
</thead>
</table>
<script>
function linkFormatter(value) {
return '' + value.text + '';
}
function kimonoCallback(data) {
$('#table').bootstrapTable({
data: data.results.collection1
});
}
$.ajax({
"url":"https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
jsFiddle: http://jsfiddle.net/wenyi/8svjf80g/33/

I have no idea what you want to display from your JSONP feed, but generally you can handle the display like so:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Href</th>
<th>Text</th>
</tr>
</thead>
<tbody id="loadHere">
</tbody>
</table>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
// this will help you see data structure while you develop the table
console.log(data);
// then create your table
var results = data.results.collection1,
i;
for (i = 0; i < results.length; i += 1) {
$('#loadHere').append(
'<tr>' +
'<td>' + results[i].nome.href + '</td>' +
'<td>' + results[i].nome.text + '</td>' +
'<td>' +
'</table>');
}
}
$.ajax({
"url":"https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
</script>
Be sure to look at the console to see how the data is structured so you can determine which fields to populate the table with.

Well.. You need to actually make the table when kimonoCallback gets called.
See?
// do something with the data
// please make sure the scope of this function is global