I have a table with rows of textboxes as inputs that hold numbers/hours with css .hours. I am trying to get the table to update totals when the row is deleted checkbox is checked/clicked.
How to Update the totals in the row & col at the End? when the delete row checkbox is checked.
2 steps: I zero out the values in the deleted row, and then want to update the new totals.
JS fiddle with HTML
// Call this function, When CheckBox with css .deleteRowis clicked
$('#Maintable').on('click', '.deleteRow', function ()
{
if ($(this).is(":checked")) {
var row = $(this).closest('tr').css({ 'color': 'red' });
var hours = row.find('.hours');
$.each(hours, function (index, item) {
if ($(this).val()) { // if there is a value
$(this).val('0');
// Total the rows does not work??
HoursChangedFunction($(this));
}
});
} // :checked ends
// when the row is deleted from the checkbox, find it and call this function
// 1) First make all .hours 0, 2) and then redo the totals
var HoursChangedFunction = function () {
var columnIndex = $(this).closest('td').index();
var row = $(this).closest('tr');
var hours = row.find('.hours');
var rowTotal = 0;
$.each(hours, function (index, item) {
rowTotal += Number($(this).val());
});
row.children('td.rowtotal').text(rowTotal.toFixed(2));
var columnTotal = 0;
var grandTotal = 0;
var rows = $('#Maintable tr');
$.each(rows, function (index, item) {
columnTotal += Number($(this).children('td').eq(columnIndex).children('.hours').val());
grandTotal += Number($(this).children('.rowtotal').text());
});
footer.eq(columnIndex).text(columnTotal.toFixed(2));
total.text(grandTotal.toFixed(2));
};
Because you have a lot of IDs you may avoid HoursChangedFunction.
In order to get the corresponding cell in the current col you can use the eq method
Moreover, you can use .text( function ) to simplify the task.
You can simplify the event handler from:
$('#Maintable').on('click', '.deleteRow', function ()
to:
$('#Maintable').on('change', '.deleteRow:checked', function () {
because inside the handler you execute the logic only when the checkbox is checked.
The snippet:
$('#Maintable').on('change', '.deleteRow:checked', function () {
var row = $(this).closest('tr').css({'color': 'red'});
$('#grandtotal').text(function(idx, txt) {
return (+txt - +row.find('.rowtotal').text()).toFixed(2);
});
row.find('.rowtotal').text('0.00');
row.find('.hours').each( function (index, item) {
if (item.value != '0.00') {
$('#Maintable').closest('table').find('tfoot tr td').eq(index + 2).text(function(idx, txt) {
return (+txt - +item.value).toFixed(2);
});
item.value = '0.00';
}
});
});
.hours {
width: 50px;
box-sizing: border-box;
border: solid 1px #d9e1e4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Task</th>
<th>Code</th>
<th>day1</th>
<th>day2</th>
<th>dy3</th>
<th>day4</th>
<th>day5</th>
<th>day6</th>
<th>day7</th>
<th>Total</th>
<th>Del</th>
</tr>
</thead>
<tbody id="Maintable">
<tr>
<td>
<span class="project">Project 1</span>
</td>
<td>
<span class="timecode">code 1A</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="2.50">
</td>
<td>
<input class="hours" type="text" value="4.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">6.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 2</span>
</td>
<td>
<input type="hidden" name="Records.Index" value="1">
<span class="timecode">code 2B</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="4.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">4.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
<tr>
<td>
<span class="project">Project 3</span>
</td>
<td>
<span class="timecode">code 2C</span>
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.50">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" ype="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td>
<input class="hours" type="text" value="0.00">
</td>
<td class="rowtotal">0.50</td>
<td><input class="bs-checkbox deleteRow" data-val="true" type="checkbox" value="true"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>0.00</td>
<td>7.50</td>
<td>4.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td>0.00</td>
<td id="grandtotal">11.50</td>
</tr>
</tfoot>
</table>
Related
I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.
JS-code for sum of n numbers:
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
I don't know why, but obviously rare are those who understand that using a form has benefits ...
const myForm = document.forms['my-form']
myForm.oninput = ({target: elm}) => // for any change iside the form
{
let
row = elm.closest('tr')
, Dsc = row.querySelector('input[name^="desc"]')
, Qte = row.querySelector('input[name^="quantity"')
, Prx = row.querySelector('input[name^="price"')
, Amt = row.querySelector('input[name^="amount"')
;
Dsc.required = (Qte.valueAsNumber > 0)
switch (elm.name.split('_')[0]) {
case 'quantity':
case 'price':
Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
myForm.SubTotal.textContent =
[...myForm.querySelectorAll('input[name^="amount"')]
.reduce((sum,el)=>sum + +el.value,0)
break;
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable form submiting
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.clear()
console.log( formInputs)
}
table {
border-collapse: collapse;
margin : 2em 1em;
}
td, th {
padding : .2em;
border : 1px solid darkblue;
}
input {
width : 6em;
text-align : right;
}
td:first-of-type input {
width : 10em;
text-align : left;
}
<form name="my-form">
<table>
<thead>
<tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
</thead>
<tbody>
<tr>
<td> <input type="text" name="desc_1" > </td>
<td> <input type="number" name="quantity_1" value="0" min="0"> </td>
<td> <input type="number" name="price_1" value="0" min="0"> </td>
<td> <input type="text" name="amount_1" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_2" > </td>
<td> <input type="number" name="quantity_2" value="0" min="0"> </td>
<td> <input type="number" name="price_2" value="0" min="0"> </td>
<td> <input type="text" name="amount_2" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_3" > </td>
<td> <input type="number" name="quantity_3" value="0" min="0"> </td>
<td> <input type="number" name="price_3" value="0" min="0"> </td>
<td> <input type="text" name="amount_3" disabled value="0"></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
</tfoot>
</table>
<button type="submit">submit</button>
</form>
You can assign an id to the subtotal cell and change its value on every Mul call.
Something like this :
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<html>
<body>
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td id="subTotal" class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I created the following table by defining different classes in javascript (the table is actually bigger but I reduced it to 3 lines for a better comprehension).
I type manually the inputs in the first column and it calculates A, B, C and SUM.
A = 5 * input
B = 4 * input
C = 3 * input
SUM = A + B + C
Total SUM =should be in this example 36 + 24 + 60 (actually there are more rows in my column) but I don't know exactly how to automatize the job. I am trying something in this direction but it does not do the job:
forEach ({
row.querySelector(".total").value +- = (Number(row.querySelector(".sum"))
Here is the code of the table and how I generate the values:
<table class="egt" bgcolor="Olive">
<! --SEGUNDA LINEA -->
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<! --TERCERA LINEA -->
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<! --ULTIMA LINEA -->
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" /></td>
</tr>
</table>
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
row.querySelector(".fuel").addEventListener("input", (event) => {
calculate(row)
})
})
function calculate(row) {
let fuel = row.querySelector(".fuel").value;
row.querySelector(".A").value = (5 * fuel);
row.querySelector(".B").value = (4 * fuel);
row.querySelector(".C").value = (3 * fuel);
row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
}
Thanks for your advise!
I tried to simplify your example a bit. Selected all the elements we're going to need at the start of the code and then attached the event listener to your inputs. When input value changes, we're recalculating the sum of the entire row and the total sum afterwards.
const totalSum = document.querySelector('.total');
const inputs = document.querySelectorAll('.fuel');
const sums = document.querySelectorAll('.sum');
inputs.forEach(input => {
input.addEventListener('input', event => {
recalculateRowSum(input);
recalculateTotalSum();
});
});
function recalculateRowSum(input) {
const row = input.parentNode.parentNode;
const a = input.value * 5;
const b = input.value * 4;
const c = input.value * 3;
const sum = a + b + c;
row.querySelector('.A').value = a;
row.querySelector('.B').value = b;
row.querySelector('.C').value = c;
row.querySelector('.sum').value = sum;
}
function recalculateTotalSum() {
totalSum.value = [...sums].reduce((total, current) => total += +current.value, 0);
}
<table class="egt" bgcolor="Olive">
<! --SEGUNDA LINEA -->
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<! --TERCERA LINEA -->
<tbody>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<tr>
<td>
<input type="number" class="fuel" style="text-align:center">
</td>
<td>
<input class="A" type="number" style="text-align:center" />
</td>
<td>
<input class="B" type="number" style="text-align:center" />
</td>
<td>
<input class="C" type="number" style="text-align:center" />
</td>
<td>
<input class="sum" type="number" style="text-align:center" />
</td>
</tr>
<! --ULTIMA LINEA -->
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" /></td>
</tr>
</tbody>
</table>
add new function to update total value
let rows = document.querySelectorAll("tbody tr");
[...rows].forEach(row => {
row.querySelector(".fuel").addEventListener("input", (event) => {
calculate(row)
})
})
function calculate(row) {
let fuel = row.querySelector(".fuel").value;
row.querySelector(".A").value = (5 * fuel);
row.querySelector(".B").value = (4 * fuel);
row.querySelector(".C").value = (3 * fuel);
row.querySelector(".sum").value = (Number(row.querySelector(".A").value) + Number(row.querySelector(".B").value) + Number(row.querySelector(".C").value));
calculateSum();
}
function calculateSum() {
let elements = document.querySelectorAll("tbody .sum");
let total = 0;
[...elements].forEach(ele => {
total += parseFloat(ele.value) || 0;
})
document.querySelector("tbody .total").value = total;
}
Let's clean it up:
const setup = () => {
const rows = document.querySelectorAll('.fuel');
[...rows].forEach(row => row.addEventListener('input', onInput));
}
const calculateSum = () => {
const sums = [...document.querySelectorAll('.sum')].map(input => Number.parseInt(input.value));
const result = sums.reduce((sum, value) => sum + value);
document.querySelector('.total').value = result;
}
const onInput = event => {
const input = event.target;
const currentIndex = input.dataset.rowIndex;
const fuel = Number.parseInt(input.value, 10);
const [A, B, C] = [(5 * fuel), (4 * fuel), (3 * fuel)]
const sum = A + B + C;
document.querySelector(`[data-row-index="${currentIndex}"].A`).value = A;
document.querySelector(`[data-row-index="${currentIndex}"].B`).value = B;
document.querySelector(`[data-row-index="${currentIndex}"].C`).value = C;
document.querySelector(`[data-row-index="${currentIndex}"].sum`).value = sum;
calculateSum();
}
//load
window.addEventListener('load', setup);
tbody input[type="number"] {
text-align: center;
}
<table class="egt" bgcolor="Olive">
<thead>
<tr>
<th>INPUT</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>SUM</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="fuel" data-row-index="0" type="number">
</td>
<td>
<input class="A" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="0" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="0" type="number" disabled>
</td>
</tr>
<tr>
<td>
<input class="fuel" data-row-index="1" type="number">
</td>
<td>
<input class="A" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="1" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="1" type="number" disabled>
</td>
</tr>
<tr>
<td>
<input class="fuel" data-row-index="2" type="number">
</td>
<td>
<input class="A" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="B" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="C" data-row-index="2" type="number" disabled>
</td>
<td>
<input class="sum" data-row-index="2" type="number" disabled>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4" align="right">Total SUM = </th>
<td><input class="total" type="number" disabled></td>
</tr>
</tfoot>
</table>
I have this table I'm working on.
When you check the checkboxes on each table, it adds to another table specified below but to sum the values of each checkboxes checked is the problem because if i check a checkbox, it would sum the wrong value and show and if i uncheck and check again, it would still adds to the total without removing the previous uncheck value from the total, but adding to another table below is working fine, its only the sum of the total value that gives the problem
Below is my html table
<table class="table table-hover">
<thead style="background-color: rgb(25, 96, 143); color: #fff;" id="feesTbl">
<tr>
<th></th>
<th>Fee Name</th>
<th>Fee Amount</th>
</tr>
</thead>
<tbody>
<form method="post" action="">
<tr data-index="1">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="2">
<td>
<input type="checkbox" class="checky" name="feeids" value="100000" data-check-name="PowerHouse Water Cooper">
</td>
<td>
PowerHouse Water Cooper
</td>
<td>
100000
</td>
</tr>
<tr data-index="3">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="4">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="5">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
</form>
</tbody>
</table>
<div id="showTotal">
<form action="" method="POST">
<input type="text" id="total" class="form-control" />
</form>
</div>
<table id="tbl2">
</table>
Below is the jquery code
// $("#showTotal").hide();
var total = 0;
var $checky = $("input[type=checkbox].checky");
$checky.click(function() {
//calculateTotal();
if ($(this).is(":checked")) {
calculateTotal();
$(this).closest("tr").clone().appendTo("#tbl2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#tbl2 tr[data-index='" + index + "']");
findRow.remove();
}
});
function calculateTotal() {
//if($(this).is(":checked")) {
$checky.each(function() {
total = parseFloat(total) + parseFloat($(this).val());
// if(total != 0) {
// $("#showTotal").show();
// }else {
// $("#showTotal").hide();
// }
$("#total").val("N" + total);
});
//}
}
Is this what you want?
I've some of your jquery around.
function calculateTotal() {
//if($(this).is(":checked")) {
var total = 0;
$checky.filter(":checked").each(function() {
total = parseFloat(total) + parseFloat($(this).val());
// if(total != 0) {
// $("#showTotal").show();
// }else {
// $("#showTotal").hide();
// }
});
$("#total").val("N" + total);
}
demo
// $("#showTotal").hide();
var $checky = $("input[type=checkbox].checky");
$checky.click(function() {
//calculateTotal();
if ($(this).is(":checked")) {
calculateTotal();
$(this).closest("tr").clone().appendTo("#tbl2");
} else {
var index = $(this).closest("tr").attr("data-index");
var findRow = $("#tbl2 tr[data-index='" + index + "']");
calculateTotal();
findRow.remove();
}
});
function calculateTotal() {
//if($(this).is(":checked")) {
var total = 0;
$checky.filter(":checked").each(function() {
total = parseFloat(total) + parseFloat($(this).val());
// if(total != 0) {
// $("#showTotal").show();
// }else {
// $("#showTotal").hide();
// }
});
$("#total").val("N" + total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
<thead style="background-color: rgb(25, 96, 143); color: #fff;" id="feesTbl">
<tr>
<th></th>
<th>Fee Name</th>
<th>Fee Amount</th>
</tr>
</thead>
<tbody>
<form method="post" action="">
<tr data-index="1">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="2">
<td>
<input type="checkbox" class="checky" name="feeids" value="100000" data-check-name="PowerHouse Water Cooper">
</td>
<td>
PowerHouse Water Cooper
</td>
<td>
100000
</td>
</tr>
<tr data-index="3">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="4">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
<tr data-index="5">
<td>
<input type="checkbox" class="checky" name="feeids" value="10000" data-check-name="CAC Fine Fees">
</td>
<td>
CAC Fine Fees
</td>
<td>
10000
</td>
</tr>
</form>
</tbody>
</table>
<div id="showTotal">
<form action="" method="POST">
<input type="text" id="total" class="form-control" />
</form>
</div>
<table id="tbl2">
</table>
The below code is used to add new row to the table, also multiply two fields and show the result in the final field, in this dynamically generated row and at last part of code, removes the added row if it is not needed.
<script type="text/javascript">
$(window).load(function(){
$('.add-box').click(function() {
var box_html = $('<tr class="multLote"><td align="center"><input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;" /></td> ' +
'<td><textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" > </textarea></td>' +
'<td><input type="text" name="lote20[]" value="0" class="val20" /></td>' +
'<td><input type="text" name="lote10[]" value="0" class="val10" /></td>' +
'<td><input type="text" disabled name="lote_result[]" class="lote_result" value="0"></td>' +
'<th>Remover</th></tr>');
$('#tabela-lotes tbody').append(box_html);
return false;
});
$('#tabela-lotes').on("keyup", ".multLote input", function() {
var mult = 0;
// for each row:
console.log($(this).closest('table').find("tr.multLote").length);
$(this).closest('tr.multLote').each(function() {
// get the values from this row:
var $val20 = $('.val20', this).val();
var $val10 = $('.val10', this).val();
console.log($val100);
var $total = ($val20 * $val10);
console.log($total);
// set total for the row
$('.lote_result', this).val($total);
mult += $total;
});
});
$('#tabela-lotes').on('click', '.remove-box', function(e) {
e.preventDefault();
$(this).closest('tr.multLote').remove();
});
});
</script>
This is the html code.
<form action="tabledb.php" method="POST">
<body>
<input type="button" class="add-box" value="Add">
<table id="tabela-lotes">
<thead>
<tr>
<th>
SL. NO
</th>
<th>
PRODUCT NAME
</th>
<th>
RATE PER CB
</th>
<th>
CBs
</th>
<th>
AMOUNT
</th>
</tr>
</thead>
<tbody><tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100" value="0"> </textarea>
</td>
<td>
<input type="text" name="lote20[]" class="val20" value="0">
</td>
<td>
<input type="text" name="lote10[]" class="val10" value="0">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="0">
</td>
</tr>
</tbody></table>
<table>
<tr><th>
Total CBS :</th>
<td> <input type="text" name="total_cbs" id="total_cbs" placeholder="Total CBS" style="height:25px;font-weight:bold;" onfocus="cal1()" readonly ></td></tr>
<tr><th>Total AMOUNT : </th>
<td><input type="text" name="total" id="total" placeholder="Total Rs." style="height:25px;font-weight:bold;" onfocus="cal2('.$i.')" readonly></td></tr>
</table>
<input type="submit" value="submit">
</form>
I want to the get the total coloumn sum of lote10[ ] and lote_result[ ] fields to be displayed in the total_cbs and total fields respectively.Please help, Thank you in advance.
enter image description here
I have updated my question with the image of the output, which states exactly what i need, Thank You.
Assuming the end result looks like this:
var result = 0;
var elements = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
for (var i = elements.length - 1; i > elements.length - 3; i--) {
var inputs = elements[i].getElementsByTagName('input');
result += parseInt(inputs[inputs.length - 1].value);
}
console.log('total', result);
alert('total ' + result);
<table>
<tbody>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
<tr class="multLote">
<td align="center">
<input type="text" name="lote[]" value="0" style="width:15%;font-weight:bold;">
</td>
<td>
<textarea name="lote100[]" value="0" style="height:25px;font-size:10pt;width:60;font-weight:bold;" class="val100"></textarea>
</td>
<td>
<input type="text" name="lote20[]" value="0" class="val20">
</td>
<td>
<input type="text" name="lote10[]" value="0" class="val10">
</td>
<td>
<input type="text" disabled="" name="lote_result[]" class="lote_result" value="7">
</td>
<th>Remover
</th>
</tr>
</tbody>
</table>
JSFIDDLE
I have a table as below:
..
There have been multiple questions asked for getting the values but in this case I should always have a parent item name. Suppose If a user selected only one subitem in "Shirts", then I should be able to get all the values from the selected tr and with that I need parent item name also i.e "shirts" and if some one clicks on all the subitems of a parent item, then all the values of all tr are need to be in some sort of array object on click of a "Save" button. I am trying hard to do this. Any help would be really appreciated. Though I have attached the HTML but this HTML is being generated at run time.
HTML:
<table>
<tr>
<td> </td>
<td> </td>
<td>Name</td>
<td>Sub Item</td>
<td>User Input</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup1" class="cls1" onclick="checkUncheckAll(this);" />
</td>
<td>Shirts
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item1</td>
<td>SubItem1</td>
<td>
<input id="1datepicker" name="1datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item2</td>
<td>SubItem2</td>
<td>
<input id="2datepicker" name="2datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls1" name="Group1" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item3</td>
<td>SubItem3</td>
<td>
<input id="3datepicker" name="3datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" id="chkGroup2" class="cls2" onclick="checkUncheckAll(this);" />
</td>
<td>Jeans
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item4</td>
<td>SubItem4</td>
<td>
<input id="4datepicker" name="4datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item5</td>
<td>SubItem5</td>
<td>
<input id="5datepicker" name="5datepicker" type="text" /><script>
</script></td>
</tr>
<tr>
<td>
<input type="checkbox" class="cls2" name="Group2" onclick="CheckCorrespondingHeader(this);" /></td>
<td> </td>
<td>Item6</td>
<td>SubItem6</td>
<td>
<input id="6datepicker" name="6datepicker" type="text" /><script>
</script></td>
</tr>
</table>
Script code looks like below:
<script>
function checkUncheckAll(sender) {
var chkElements = document.getElementsByClassName(sender.className);
for (var i = 0; i < chkElements.length; i++) {
chkElements[i].checked = sender.checked;
}
}
function CheckCorrespondingHeader(sender) {
ControlLength = $("[name='" + sender.name + "']").length;
var countchecks = 0;
$("[name='" + sender.name + "']").each(function () {
if ($(this).prop('checked') == true) {
countchecks = countchecks + 1;
}
});
if (ControlLength == countchecks) {
$("#chk" + sender.name).attr('checked', 'checked');
}
else {
$("#chk" + sender.name).prop('checked', false);
}
}
function PickAllCheckedRows() {
}
</script>
As far as I can tell your code should work if you fix one issue. You are determining the number of sub rows that need to be checked to make the header row be checked using $("[name='" + sender.name + "']").length;. But unless I'm mistaken sender.name is never set. Of course if you set it this still won't work because your each function will include the header row. There are several solutions to this but I would recommend using a data attribute instead of the name attribute like so:
Markup:
<table>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 1 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- row 2 -->
<td><input type="checkbox" data-in-group="Group1" ... /></td>
</tr>
<tr>
<!-- head -->
<td><input type="checkbox" data-head-for-group="Group2" ... /></td>
</tr>
<tr>
<!-- row 3 -->
<td><input type="checkbox" data-in-group="Group2" ... /></td>
</tr>
</table>
Script:
function CheckCorrespondingHeader(sender) {
var group = $("[data-in-group='" + sender.data('headForGroup') + "']");
var groupSize = group.length;
var countchecks = 0;
group.each(function () {
if ($(this).prop('checked') === true) {
countchecks = countchecks + 1;
}
});
if (groupSize === countchecks) {
$(sender).attr('checked', 'checked');
} else {
$(sender).prop('checked', false);
}
}