I want to sum up total income and total indirect income. This total values in html table comes using jQuery by providing a class. But now I want to sum up two table total values in a single variable and put in a new html table.
The new html table looks like we have a column total (income+indirect income) = variable. Click to see the HTML table
How can I do that using jQuery. Click this link and see that the values of total amount column are sum up and lies in the footer on every table. But now I want to sum up two table values in a single variable and that new variable I want to put in a new html table on a same page.
$(document).ready(function() {
var total_1 = 0;
$('.income-amount').each(function(i, obj) {
total_1 += parseInt($(obj).text());
});
$('#income-total').text(total_1.toFixed(1));
});
I use this jQuery in the Html table for total amount column sum up.
Below is the html table.
<table id="example" class="table table-striped table-bordered table-responsive-xl">
<caption style="caption-side:top; text-align: center;"><h3>Income</h3></caption>
<thead class="thead-dark">
<tr>
{# <th>S No.</th>#}
<th>Particulars</th>
<th>Description</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
{% for item in all_profit %}
{% if item.category.under == "Income" %}
<tr>
{# <td>{{ }} </td>#}
<td>{{item.category}}</td>
<td>{{item.category.desc}}</td>
<td class='income-amount'>{{ item.balance }} </td>
</tr>
{% endif %}
{% endfor %}
</tbody>
<tfoot>
<tr class="totalColumn">
<td style="visibility:hidden;"></td>
<td style="visibility:hidden;"></td>
<td id='income-total'>Total:</td>
</tr>
</tfoot>
</table>
Related
I'm using django to list the number of cars sold in a particular dealership. (assuming there are only red and blue cars)
I have designed the query in such a way that we could visualise cars at a monthly or weekly or yearly level. so the data in the table in going to be changing , so I have written the following javascript code to read the table that will be generated everytime . I have also used pagination to include only 10 in a page.
The code just reads what is available on the first page and returns 10 every single time whereas I need it to consider all the pages . Can someone help
<script>
function counter(){
var j = 6; //j=6 is the column id for colour in my table , so I'm, directly using it
var total = 0;
var red= 0;
var blue= 0;
var table = document.getElementById("datatable");
for (var i = 1, row; row = table.rows[i]; i++)
{
var Row = document.getElementById("datatable").rows[i].cells[j].innerHTML;
var colour = document.getElementById("datatable").rows[i].cells[j].innerHTML;
//alert(document.getElementById("datatable").rows[i].cells[j].innerHTML);
if (colour == "red")
{
red= red+ 1;
}
else if (colour== "blue")
{
blue= blue+ 1;
}
total = red+ blue;
}
document.getElementById("total_count").innerText = total;
document.getElementById("red_count").innerText = red;
document.getElementById("blue_count").innerText = blue;
}
</script>
HTML to the table
<div class="menu">
<table cellpadding="0" id="datatable" style="margin-top: 20px" style="margin-bottom:20px" class="table" >
<thead>
<tr class="text-light bg-dark">
<th class="text-center" >Date</th>
<th class="text-center" >Model</th>
<th class="text-center" >CustomerName</th>
<th class="text-center" >Mobile</th>
<th class="text-center" >Adress</th>
<th class="text-center" >Delivery</th>
<th class="text-center" >Colour</th>
</tr>
</thead>
<tbody>
{% for obj in filter.qs %}
<tr>
<td class="text-center" >{{ obj.Date}}</td>
<td class="text-center" >{{ obj.Model}}</td>
<td class="text-center" >{{ obj.CustomerName}}</td>
<td class="text-center" >{{ obj.Mobile}}</td>
<td class="text-center" >{{ obj.Address}}</td>
<td class="text-center" >{{ obj.Delivery }}</td>
<td class="text-center" >{{ obj.Qa_Decision }}</td>
since there table with id 'datatable' exist, im assuming you using DataTables library
if you not using server side datatables pagination, you can access all data with rows().data() refrence https://datatables.net/reference/api/rows().data()
if your using server side datatables or even not using datatables
you only can count that data in backend(django), since js cant access all that data
I want to print table row information in a Javascript function bind to the onclick event of a button.
view.py
def table(request):
test_list = TestInformation.objects.order_by()
context = { 'test_list' : test_list, }
return render(request, '/test.html', context)
test.html
<label ~~ id="btn_click" onclick="btn()">
<table class="table table-bordered" id="data_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{% for li in test_list %}
<tr>
<td> {{ li.Id }} </td>
<td> {{ li.Name}} </td>
</tr>
{% endfor %}
</tbody>
</table>
<Script type="text/javascript">
function btn {
//I'd like to put above {for~~ endfor} source here!
}
</Script>
Currently Action
The table is displayed as soon as you load the html page.
Expected Action
Only visible when the table presses a button
How can I invoke Python objects in JavaScript functions for the actions I expect?
In order to check cells in my table for whether they contain a value in javascript, it seems I need to give each td an id. I'll have thousands of cells, so typing out each td with its id isn't possible.
Currently the trs with all the tds are generated with a loop in html, so with javascript I wanted to add a variable and stick it on the end of each id.
I've managed to get a javascript variable into my html loop and it's correctly counting up, but my issue is getting it into the id="___" part.
As shown in the code below, I've tried putting the document.write(i) line into the id, but it seems to treat it just as normal text. I've also put it in the output for DataEntryStatus just to prove that it's counting correctly, starting at 1 and increasing with each new row.
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
</tr>
<tbody id="myTable">
<script>
var i = 1;
</script>
{% for item in items %}
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus"><div>{{ item.DataEntryStatus }} <script>document.write(i)</script></div></td>
<td id="Tool + <script>document.write(i)</script>"><div>{{ item.Tool }}</div></td>
</tr>
<script>
i = i + 1;
</script>
{% endfor %}
</tbody>
And my javascript:
$('#table_id tr').each(function(){
if($('#Tool' + 'i').text() =="")$('#DataEntryStatus' + 'i').text("Entry missing");
else if($('#CutRef' + 'i').text() =="")$('#DataEntryStatus' + 'i').text("Entry missing");
else($('#DataEntryStatus' + 'i').text("Complete"));
if($(this).text().toLowerCase() =="entry missing")$("#DataEntryStatus").css('background-color','#fcc');
if($(this).text().toLowerCase() =="complete")$("#DataEntryStatus").css('background-color','#af0');
});
I want something like my id="Tool + document.write(i)" line to make ids like Tool1, Tool2, ... but right now it's treating + document.write(i) as normal text and I don't know how to get it to work as a script.
It looks like you're using Django, so why not just add the ID using that?
<table class="table" id="table_id">
<tr>
<th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
<th style="vertical-align:bottom;">Data Entry Status</th>
<th style="vertical-align:bottom;">Tool</th>
</tr>
<tbody id="myTable">
{% for item in items %}
<tr>
<td>
Edit
! X !
</td>
<td id="DataEntryStatus{{ forloop.counter0 }}"><div>{{ item.DataEntryStatus }}</div></td>
<td id="Tool{{ forloop.counter0 }}"><div>{{ item.Tool }}</div></td>
</tr>
{% endfor %}
</tbody>
Django has a forloop variable inside loops that gives you access to the current index.
Update
To use that with JavaScript, change counter to counter0. This is now the same as an index within a JavaScript loop.
You'd access that by looping through with .each as you have been, but with a slight modification.
$('#table_id tr').each(function(i){
if($('#Tool' + i).text() =="")$('#DataEntryStatus' + i).text("Entry missing");
else if($('#CutRef' + i).text() =="")$('#DataEntryStatus' + i).text("Entry missing");
else($('#DataEntryStatus' + i).text("Complete"));
if($(this).text().toLowerCase() =="entry missing")$("#DataEntryStatus").css('background-color','#fcc');
if($(this).text().toLowerCase() =="complete")$("#DataEntryStatus").css('background-color','#af0');
});
I have values from my database and in my view I have added one column
added for the total or average value.In every rows, it has 3 columns
with values.In database there is no column for average yet instead of
putting in database, I only put in my blade.php. How could i possibly
do it in javascript?It seems like i don't know what to start since I'm
not a master in java.
<tbody>
#foreach($card['AllGrade'] as $subject)
<tr>
<th colspan="4">{!! $subject['subject'] !!}</th>
<th colspan="2" >{!! $subject['term_1'] !!}</th>
<th colspan="2" >{!! $subject['term_2'] !!}</th>
<th colspan="2" >{!! $subject['term_3'] !!}</th>
<th colspan="2" name ="ave" id ="ave" value=""> total value here</th>
</tr>
#endforeach
I think you should not code like this, You can use php code to add/average the result.Because you are expecting you can check the code given here. Just add this code to your blade file and of-course use Jquery
$("tbody tr").each(function() {
var total = 0;
$(this).children('th').not(':first').not(':last').each(function () {
//"this" is the current element in the loop
var number = parseInt($(this).html());
total += number;
});
$(this).children('th').last().html(total);
});
I have a table of All Sales, with the Client's Name, the date and the Sale Price.
I have a script for allowing a User to search through the table, but I would also like a script that returns a total for all the Sale Prices visible in the table.
e.g. If a User searches for T.Toe, then the script returns the sum of all Sale Prices for T.Toe.
code:
<table class="well table table-condensed small" id="academy">
<tr>
<td colspan="3">
<input type="text" id="search_academy" placeholder=" quick search" autocomplete="off">
</td>
<td><input type='text' style="width: 30px;" id='sum'></td>
</tr>
{% for sale in academy|sort(attribute="sale_date", reverse=True) %}
{% if sale.price > 0 %}
<tr class="success">
{% else %}
<tr class="danger">
{% endif %}
<th>{{ sale.sale_date.strftime('%d-%m-%Y') }}</th>
{% if sale.client %}
<th>{{ sale.client }}</th>
{% else %}
<th>{{ sale.concept }}</th>
{% endif %}
<th>{{ sale.club }}</th>
<th class="prices">{{ sale.price }}</th>
</tr>
{% endfor %}
</table>
JQuery for live search over the table and returning a sum of the searched cells:
EDIT:
Thanks to #pointy and #user4621032 the script currently is:
<script>$("#search_academy").keyup(function () {
var value = this.value.toLowerCase().trim();
$("#academy").find("tr").each(function (index) {
if (!index) return;
var id = $(this).find("th").text().toLowerCase().trim();
$(this).toggle(id.indexOf(value) !== -1);
});
var sum = 0;
$('.prices').each(function () {
sum += parseFloat($(this).text());
});
$('#sum').val(sum);
});
</script>
I changed the parseInt to parseFloat to keep 1 decimal place.
This does return a sum of the all cells in the column with the .prices class. However I am looking for the script to return the sum of only the .prices cells returned via the User search in #search_academy.
Thanks!
replace
sum += parseInt(this.innerHTML);
ro
sum += parseInt($(this).text());