how to calculate rows total onclick function - javascript

I am trying to calculate column Number when I select married total are shown only married and when I select Unmarried total are shown only unmarried and if none of above total are show both.
function filterText() {
var rex = new RegExp($('#filterText').val().join('|'));
if (rex == "/all/") {
clearFilter()
} else {
$('.content').hide();
$('.content').filter(function() {
return rex.test($(this).text());
}).show();
}
}
function clearFilter() {
$('.filterText').val('');
$('.content').show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='1'>Married</option>
<option value='2'>Unmarried</option>
<option value='all'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td>800</td>
<td>All</td>
</tr>
</tbody>
</table>
just I want to calculate particular selected value.
if any solutions, please help me and Thanks in advance.


You can use each to loop thru the .content, check if the text is including in the array, if it is, show and add the total.
Note: I added an id to td total. This is to make it easier to update the cell.
function filterText() {
var data = $("#filterText").val();
var isAll = data.includes("All");
var total = 0;
$(".content").hide().each(function() {
if (isAll || data.includes($(this).find("td:eq(3)").text().trim())) {
$(this).show();
total += +$(this).find("td:eq(2)").text();
}
})
$("#total").text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='Married'>Married</option>
<option value='Unmarried'>Unmarried</option>
<option value='Widow'>Widow</option>
<option value='All'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>30</td>
<td>Widow</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td id="total">800</td>
<td>All</td>
</tr>
</tbody>
</table>
Or you can use jQuery filter to filter the tr that is including the selected value. You can reduce the shown tr to get the total.
function filterText() {
var data = $("#filterText").val();
var shown = $(".content").hide().filter(function() {
return data.includes($(this).find("td:eq(3)").text().trim()) || data.includes("All");
}).show().get();
var total = shown.reduce((c, v) => {
return c + +$(v).find("td:eq(2)").text()
}, 0);
$("#total").text(total);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id='filterText' multiple="multiple" name="filterText[]" style='display:inline-block' onclick='filterText()'>
<option disabled selected>Select</option>
<option value='Married'>Married</option>
<option value='Unmarried'>Unmarried</option>
<option value='Widow'>Widow</option>
<option value='All'>All</option>
</select>
<table id="table_format" border="1px">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Number</th>
<th>Married
</th>
</tr>
</thead>
<tbody>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>25</td>
<td>Married</td>
</tr>
<tr class="content">
<td>1</td>
<td>Larry</td>
<td>20</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>1</td>
<td>Mark</td>
<td>15</td>
<td>Married</td>
</tr>
<tr class="content">
<td>2</td>
<td>Jacob</td>
<td>30</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>5</td>
<td>Unmarried</td>
</tr>
<tr class="content">
<td>2</td>
<td>Larry</td>
<td>30</td>
<td>Widow</td>
</tr>
<tr>
<td>3</td>
<td>Total</td>
<td id="total">800</td>
<td>All</td>
</tr>
</tbody>
</table>

Related

Nested table with data tables

I have the following nested HTML table. I am using the Datatables API to make my tables searchable. One problem I have faced is with the nested tables I'm not sure how to make the nested tables searchable? I have tried adding additional ID tags to the nested tables HTML code and adding that into the dataTables JS code call but that did not work. Any idea how to make the sub-tables searchable?
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<div class="container">
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Image</th>
<th>Date</th>
<th>TC NAME</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
</tr>
</thead>
<tbody>
<tr>
<td>721</td>
<td>3/15/20</td>
<td>
<table id="example1" class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>722</td>
<td>3/16/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>633</td>
<td>3/17/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>300</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>

If you by "searchable" mean DataTables inside DataTables you can use the createdRow callback to initialize tables inside a <tr>'s columns.
You must have a columns section in order to compensate for the missing <thead> in the nested tables (avoiding the TypeError: col is undefined error) :
const columns = [
{ title: '' },
]
Init the nested tables in the createdRow callback:
let table = $('#example').DataTable({
createdRow: function(row) {
$(row).find('td table')
.DataTable({
columns: columns,
dom: 'tf'
})
}
})
Notice the dom section. Here only showing the table itself and the filter box. You
can remove the header with
table.dataTable td table thead {
display: none;
}
Dont add this CSS if you want sortable columns in the nested tables.
demo using the markup in question -> http://jsfiddle.net/davidkonrad/8pzkr6yn/
Update. If your concern just is to be able to search within the content of the nested tables (e.g the HTML markup scraped away) just define the relevant columns type as 'html' (https://datatables.net/reference/option/columns.type) :
let table = $('#example').DataTable({
columnDefs: [
{ targets: [2,3,4,5,6,7], type: 'html' },
],
...
})

Re-apply css rules for first visible row on table

I am trying to change css style for the first visible row on a table using jQuery and css rules.
When i change the offset i would like to show first visible table TBODY row in red using my css rule.
this is my code example :
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
Thanks for your help.

Through Pure css it's not possible:- Targeting first visible element with pure CSS
But through jQuery you can do like below:-
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
$(".is-visible:first").css({"background-color":"red"});
$(".is-visible").not(":first").css({"background-color":"#ffffff"});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>

You have to do using jQuery. Try below code.
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
$(".is-visible").css({"background-color":"white"});
$("#row-"+offset).css({"background-color":"red"});
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You can see: https://jsfiddle.net/dkhny7t9/3/

How to multiply two value on focus of any text box using javascript?

I have a table in which I have some columns:
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
</tbody>
</table>
If a user adds some value in the "Price" column then I multiply "Quantity" and "Price" and show the result in the third column "Total" in the same row. It will have to run time. Please give me a solution in javascript or jQuery.

You can do it like this :
$("#TableID1").find("input").change(function(){
var getVal = $(this).parent().index();
var multiply = Number($(this).parent().parent().find("td").eq(getVal-1).text()) * $(this).val();
$(this).parent().parent().find("td").eq(getVal+1).find("input").val(multiply)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>
Hope it helps :)

Attach input event handler and update the input based on the value.
$(document).ready(function() {
$('tr td:nth-child(5) input').on('input', function() {
// get input in last column and set value
$(this).closest('tr').find('td:nth-child(6) input').val(
// get value from input, and use `+` to convert string to number
+$(this).val() *
// get quantity value and multiply
+$(this).closest('tr').find('td:nth-child(4)').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>

move the tr of the table to be visible in the table by using js

The example is as follows:
see : DEMO
or:
<body>
<select>
<option>1</option>
<option>2</option>
<option>......</option>
<option>21</option>
</select>
<div style="overflow:auto;height:50%;width:50%">
<table border="1">
<tr>
<th>Rowno</th>
<th>Savings</th>
<th>Title</th>
</tr>
<tr>
<td>1</td>
<td>$100</td>
<th>t1</th>
</tr>
<tr>
<td>2</td>
<td>$300</td>
<th>t2</th>
</tr>
<tr>
<td>3</td>
<td>$400</td>
<th>t3</th>
</tr>
</tr>
</tr>
<tr>
<td>4</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>5</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>6</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>7</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>8</td>
<td>$200</td>
<th>t5</th>
</tr>
<tr>
<td>21</td>
<td>$200</td>
<th>t5</th>
</tr>
</table>
</div>
</body>
As the example in the jsfiddle above,assuming that the row 21st. is invisible in the table unless you scroll the scrollbar to the bottom,so if I want to move the the row 21st. of the table to be visible in the table when selecting a rowno in the select options by using js or jquery,could you please tell me how to write this js? thanks.

If you are using Jquery. You can use the hide function. Your would require a class.
$('.trhideclass1').hide();
<tr class="trhideclass1">
<td>......</td>
</tr>

Add Item to Table - HTML/CSS/JS

Let's say I have a dropdown (or combobox) and it has list of things. Once I select one thing from the list, it will automatically add to Table. How would I do that? Possible it is only HTML/JS?
Dropdown:
<select class="combobox form-control" style="display: none;">
<option value="" selected="selected">Point Guard</option>
<option value="CP3">Chris Paul (93)</option>
</select>
Table:
<table class="table">
<thead>
<tr>
<th>Position</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
</tr>
</tbody>
</table>
Thanks.

Using jQuery:
$('.combobox').change(function(e) {
var selectedVal = $(this).val();
$('.table').append('<tr><td>' + selectedVal + '</td></tr>');
});
I hope you get the idea.

Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$(".combobox").change(function () {
var temp1 = $(".combobox option:selected").text().split(' ');
$('.table tr:last').after('<tr><td>' + $('.table tr').length + '</td><td>' + temp1[0] + '</td><td>' + temp1[1] + '</td></tr>');
});
});
function removeItem() {
$('.table tbody tr:first').remove();
//.eq() -- You can also use this to fetch nth row
}
</script>
</head>
<body>
<select class="combobox form-control">
<option value="" selected="selected">Point Guard</option>
<option value="CP3">Chris Paul (93)</option>
</select>
<button onclick="removeItem()">Remove First Row</button>
<table class="table">
<thead>
<tr>
<th>Position</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
</tr>
</tbody>
</table>
</body>
</html>

Categories