A little calculation - javascript

With this code, how do I put multiplication * to make #ttc = #totalcout * #marge
When I click on the checkboxes, I manage to make the additions, but I can not integrate the multiplication to do the TTC
// Addition when click checkbox
$("input[type=checkbox]").click(function(e) {
var total = 0;
$("input[type=checkbox]:checked").each(function() {
total += parseFloat($(this).val());
});
if (total == 0) {
$("#totalcout").html(0);
} else {
$("#totalcout").html(total + ' €');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>Coût HT</th>
<th>Marge</th>
<th>Prix TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<p id="totalcout"></p>
</td>
<td align="center">
<p id="marge">5</p>
</td>
<td align="center">
<p id="ttc"></p>
</td>
</tr>
</tbody>
</table>


After you have calculated your new total, multiple that times marge and update #ttc with that newly calculated value.
// Addition when click checkbox
$("input[type=checkbox]").click(function(e) {
var total = 0;
$("input[type=checkbox]:checked").each(function() {
total += parseFloat($(this).val());
});
if (total == 0) {
$("#totalcout").html(0);
} else {
$("#totalcout").html(total + ' €');
}
// Now that you've recalculated the total, multiply that times 'marge' and insert that into '#ttc'
const marge = parseFloat($("#marge").html());
$("#ttc").html(parseFloat(total) * marge + ' €');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value=5>5</input>
<input type="checkbox" value=10>10</input>
<table class="table table-bordered">
<thead>
<tr>
<th>Coût HT</th>
<th>Marge</th>
<th>Prix TTC</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<p id="totalcout"></p>
</td>
<td align="center">
<p id="marge">5</p>
</td>
<td align="center">
<p id="ttc"></p>
</td>
</tr>
</tbody>
</table>

Related

I need to copy selected row from one table to another html table using JQuery or Javascript

I have data in source table and i want to copy and append row to destination table on button click of specific row. There is an h1 where I want to display column total of price column of destination table. Also I need button on destination table from which I can remove the selected row from that table.
<table id="source_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Product 1</td>
<td >$10</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>2</td>
<td >Product 2</td>
<td >$20</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
<tr>
<td>3</td>
<td >Product 3</td>
<td >$30</td>
<td>
<button type="button" class="copy-row" >+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table" >
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div> Total Price <h1> <!-- I want to show price column(dest_table) total here -> </h1> </div>

Consider the following example.
$(function() {
function calcTotal(t) {
var rows = $("tbody tr", t);
var total = 0.00;
var val;
rows.each(function(i, r) {
val = $("td:eq(2)", r).text().substr(1);
total += parseFloat(val);
});
$(".total").html("$" + total);
}
$(".copy-row").click(function(e) {
var src = $(this).closest("tr");
var dst = $("#dest_table tbody");
src.clone().appendTo(dst);
$("#dest_table tbody tr:last td:eq(3) button").toggleClass("copy-row del-row").html("X");
calcTotal($("#dest_table"));
});
$("#dest_table tbody").on("click", ".del-row", function(e) {
if (confirm("Are you sure you want to remove this row?")) {
$(this).closest("tr").remove();
}
calcTotal($("#dest_table"));
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="source_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Copy</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Product 1</td>
<td>$10</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Product 2</td>
<td>$20</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
<tr>
<td>3</td>
<td>Product 3</td>
<td>$30</td>
<td>
<button type="button" class="copy-row">+</button>
</td>
</tr>
</tbody>
</table>
<table id="dest_table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action Delete</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="total"> Total Price
<h1></h1>
</div>
This makes use of a lot of elements, yet at it's core, it does clone the row, and appends the clone to the destination.

Do you want something like this:
$(document).ready(function(){
$(".copy-row").click(function(){
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
var col4=currentRow.find("td:eq(3)").text(); // get current row 4th TD
var markup = "<tr><td>" + col1 + "</td><td>" + col2 + "</td><td>" + col3 + "</td><td>" + col4 + "</td></tr>";
$("#dest_table tbody").append(markup);
// sum of price
var sum = 0;
$('#dest_table tbody tr').each(function() {
var price = $(this).find('td:eq(2)').text();
price = price.replace('$', '');
sum += parseInt(price);
});
$('#total').text('$' + sum);
});
});
But I highly recommend you use some framework like React, Vue or Svelte. Your life will be easier.

Javascript table filter doesn't show table headers

Im using a script to filter a table based on a select value. The script works, the only problem is that it filter also the headers of the table, which Id like to show always.
This is the javascript and the table:
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return $(item).find('td:last-child').text().split(';').indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="text" id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>
My question is: How can I edit the script to show the headers?
Thank you for your time :D
let me know if I have to explain the situation better.

you can add a more specific selector :
var dataset = $('table tbody tr');

Please find the below solution with output.
$(document).ready(function($) {
$('#mac').change(function() {
var selection = $(this).val();
var dataset = $('table').find('tr');
dataset.show();
dataset.filter(function(index, item) {
return index !== 0 && $(item).find('td:last-child').text().split(';').map(x => x.trim()).indexOf(selection) === -1;
}).hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="mac">
<table id="table_id" class="display">
<thead>
<tr>
<th>Tipo</th>
<th>Descrizione</th>
<th>Scadenza</th>
<th>Società</th>
<th>Macrotema</th>
</tr>
</thead>
<tbody>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Corsi di aggiornamento </td>
<td>
<nobr>2025/01/01</nobr>
</td>
<td>XXXX</td>
<td>SEDE; </td>
</tr>
<tr style=" background-color:">
<td>Prescrizione</td>
<td>Rinnovo iscrizione</td>
<td>
<nobr>2024/12/31</nobr>
</td>
<td>XXXX</td>
<td>SEDA; </td>
</tr>
<tr style=" background-color:">
</tbody>
</table>

How do I link user input function with the table in HTML?

I created a Shopping List table with two sections(Grocery Name and Price) in my browser and I have a field for the user to input the name of the grocery. I want, every time when the user enters an item in the field and presses the "ADD" button or enter, for the item to be placed into the table section.
var groceries = []
document.querySelector('#addGroceryForm').addEventListener('submit', addGrocery)
function addGrocery(event) {
event.preventDefault() //stop the form submission(re-loading the page)
var groceryInput = document.querySelector('#groceryInput')
groceries.push(groceryInput.value)
//Add the new column to the table;
groceryInput.value = ''
updateGroceries()
}
function updateGroceries() {
var groceriesElement = document.querySelector('#groceries')
groceriesElement.innerHTML = ''
for (var currentIndex = 0; currentIndex < groceries.length; currentIndex++) {
var grocery = groceries[currentIndex]
groceriesElement.innerHTML += '<li>' + grocery + '</li>'
}
}
<form id="addGroceryForm" method='post'>
<input id='groceryInput' type='text' placeholder="Enter Food">
<button type='submit'>ADD</button>
</form>
<table class="table-fill">
<thead>
<tr>
<th class="text-left">Item</th>
<th class="text-left">Price</th>
</tr>
</thead>
<tbody class=groceries>
<tr>
<td></td>
<td class="groceryInput"></td>
</tr>
<tr>
<td class="text-left" id='leftOne'> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
<tr>
<td class="text-left"> </td>
<td class="text-left">£</td>
</tr>
</tbody>
</table>

Search in multiple columns using contains selectors

i am creating a search where user can search in multiple columns.
I achieved doing search for single columns using jQuery :contains, but not getting how to do multiple column search?
CODE:
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input type="text" onkeyup="search('name', this.value);" />
</td>
<td>
<input type="text" onkeyup="search('number', this.value);" />
</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr>
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr>
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr>
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
Java Script Code Here :
function search(field, val) {
if (val.length > 1) {
$('.search_name').parent('tr').hide();
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function(elem) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
if (field == 'name') {
$('.search_name:contains(' + val + ')').parent('tr').show();
}
if (field == 'number') {
$('.search_number:contains(' + val + ')').parent('tr').show();
}
} else {
$('.search_name').parent('tr').show();
}
}
From the above code it searches for single column at a time but i want search word in name abcd with number 12345, so than it shows only 1 row which matches both the keywords.
DEMO PLUNKER

Try This
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input id="searchName" type="text" onkeyup="search();" />
</td>
<td>
<input id="searchNumber" type="text" onkeyup="search();" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
function search() {
var searchName = $("#searchName").val() || '';
var searchNumber = $("#searchNumber").val() || '';
if (searchName == '' && searchNumber == '') {
$('tr.data').show();
}
else {
$('tr.data').hide();
if (searchName != '' && searchNumber != '') {
var eleSearchName = $(".search_name:contains(" + searchName + ")");
if (eleSearchName.length > 0) {
$.each(eleSearchName, function () {
if ($(this).next("td.search_number:contains(" + searchNumber + ")").length > 0)
$(this).parent('tr').show();
});
}
}
else if (searchName != '') {
$('.search_name:contains(' + searchName + ')').parent('tr').show();
}
else if (searchNumber != '') {
$('.search_number:contains(' + searchNumber + ')').parent('tr').show();
}
else {
$('tr.data').show();
}
}
}
</script>
</body>
</html>
UPDATE: Try this Generic Code upto N number of columns :)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<table border="1" cellpadding="10">
<tr style="background:#428bca; color:#fff;">
<th>Name</th>
<th>Number</th>
</tr>
<tr>
<td>
<input class="searchbox" data-class="search_name" type="text" />
</td>
<td>
<input class="searchbox" data-class="search_number" type="text" />
</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">12345</td>
</tr>
<tr class="data">
<td class="search_name">abcd</td>
<td class="search_number">67890</td>
</tr>
<tr class="data">
<td class="search_name">ijkl</td>
<td class="search_number">00000</td>
</tr>
<tr class="data">
<td class="search_name">mnop</td>
<td class="search_number">00000</td>
</tr>
</table>
<script>
$(".searchbox").on('keyup', function () {
if ($(this).val() != '') {
search(this);
}
else {
$(".data").show();
$.each($(".searchbox"), function () {
if ($(this).val() != '') {
$(this).keyup();
}
});
}
});
function search(ele) {
var val = $(ele).val() || '';
if (val == '')
return;
var dataclass = $(ele).attr('data-class');
var SearchInText = '';
$.each($(".data:visible"), function () {
SearchInText = $(this).find("td." + dataclass).text();
if (SearchInText.indexOf(val) == -1)
$(this).hide();
});
}
</script>
</body>
</html>

How to calculate Grand totals on a filtered table?

I have just create a large table with more than 30 rows of data, witch can be filtered by on of its column - the Name column.
The thing that the filter do is - it is putting style="display: none;" into the TR tag.
My question is - how to create a Grand Total row that sum only the non "display: none" rows?
Here is a sample of my table:
<table class="sortable TF" id="table1" border="1">
<thead>
<tr class="fltrow">
<td>
<input class="flt" ct="0" id="flt0_table1" type="text">
</td>
<td>
<input class="flt" ct="1" id="flt1_table1" type="text">
</td>
<td>
<input class="flt" ct="2" id="flt2_table1" type="text">
</td>
<td>
<input class="flt" ct="3" id="flt3_table1" type="text">
</td>
</tr>
<tr>
<th class="head_row">Person</th>
<th class="head_row">Monthly pay</th>
<th class="head_row">Monthly pay1</th>
<th class="head_row">Monthly pay2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Steve Nicol</td>
<td>8,500</td>
<td>51,000</td>
<td>1,000</td>
</tr>
<tr>
<td>Steve McMahon</td>
<td>9,200</td>
<td>3,000</td>
<td>2,000</td>
</tr>
<tr style="display: none;">
<td>Jan Molby</td>
<td>12,000</td>
<td>4,000</td>
<td>11,000</td>
</tr>
<tr style="display: none;">
<td>John Barnes</td>
<td>15,300</td>
<td>200</td>
<td>12,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Grand TOTAL</td>
<td>???</td>
<td>???</td>
<td>???</td>
</tr>
</tfoot>
</table>

var sum = [0, 0, 0];
$('table.sortable tbody tr:visible').each(function() {
sum[0] += parseInt($('td:eq(1)', this).text().replace(',', ''), 10);
sum[1] += parseInt($('td:eq(2)', this).text().replace(',', ''), 10);
sum[2] += parseInt($('td:eq(3)', this).text().replace(',', ''), 10);
});
$('table.sortable tfoot tr td:gt(0)').each(function(i) {
var text = sum[i].toString();
if (text.length > 3) { // checking length for 3 to insert comma
text = text.replace(/(\S{3}$)/, ",$1");
}
$(this).text(text);
});
DEMO
But if you remove comma then change is:
$('table.sortable tfoot tr td:gt(0)').each(function(i) {
$(this).text(sum[i]);
});
DEMO

Categories