PHP: Getting work days and closed days based on checkbox

PHP: Getting work days and closed days based on checkbox - javascript

So This is what i have done till now ,but i can't think of a way to get the data, entered or checked by user for each day in php . Since i have the same name for all the input type for workdays i.e. name='work' . I cant find a way to get the values for each day seperately( USING PHP).
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
<td><b>Close</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="mday" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="tday" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="wday" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="thday" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="fday" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="sday" value="close" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
<td><input type="checkbox" name="suday" /></td>
</tr>
</table>
<br />
<br />
<b>Number Of Employees:</b><input type="number" max="20" min="1" name="noe" placeholder="1 - 20" /> <br /> <br />
<table>
<tr>
<td><b>Buisness Details:</b></td>
<td><input type="date" name="doe"
placeholder="Date Of Establishment" /></td>
</tr>
<tr>
<td></td>
<td><input type="number" name="a_tover" placeholder="ANNUAL TURNOVER" /></td>
</tr>
</table>
</form>
</center>
<script language="javascript">
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</body>

<html>
<head>
<script>
var workdays=[0,0,0,0,0,0,0];
var days=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var allcheckbox = document.getElementsByName('work');
function checkcheckbox(arr,checked){
for (var i = 0; i < checked.length; i++) {
if(checked[i].checked){
arr[i]=1;
}else{
arr[i]=0;
}
}
console.log(arr);
}
function print(arr,days){
for (var i = 0; i < arr.length; i++) {
if(arr[i]==0){
console.log(days[i]+": close");
}else{
console.log(days[i]+": workday");
}
}
}
function toggle(source) {
checkbox = document.getElementsByName('work');
for (var i = 0, n = checkbox.length; i < n; i++) {
checkbox[i].checked = source.checked;
}
}
</script>
</head>
<body>
<center>
<form method="post" action="Acharges.php">
<table>
<tr>
<td colspan="4"><input type="checkbox" onclick="toggle(this)" name="day" /><b>All Day</b></td>
<td><b>Working</b></td>
</tr>
<tr>
<td colspan="4"><b>Monday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Tuesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Wednesday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Thursday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Friday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Saturday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
<tr>
<td colspan="4"><b>Sunday</b></td>
<td><input type="checkbox" name="work" value="work" /></td>
</tr>
</table>
<br />
<input type="button" value="SEND" onclick="checkcheckbox(workdays,allcheckbox)"/>
<input type="button" value="SEND" onclick="print(workdays,days)"/>
</form>
</center>
</body>
</html>

Related

how to get the sum of all row value in jquery

I'm trying to achieve two additions in my code.
I am trying to get the sum of the row values in the last column of the row
I am trying to get the sum of all the final columns in another div
I've achieved the first, my code gives me the correct value of each row. However the second sum is not populating the addition. It's giving me the same value of each row, but I want the value of all rows.
$('.bonus-sum').keyup(function() {
var sum = 0;
var salary = parseFloat($(this).closest('tr').find('.wagein').text());
var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
$(this).closest('tr').find('.bonus-in:checked').each(function() {
sum = salary + bonus;
});
$(this).closest('tr').find('.netpay').text(sum.toFixed(2));
var netpay = 0;
netpay += sum;
$('#total').text('₹ ' + netpay.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Salary ₹</th>
<th class="text-right">Net pay ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>1</td>
<td>Chellammal Kochimoni</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>2</td>
<td>Christal Prema G.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>3</td>
<td>Kamalesan T.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Palammal A.</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="bene_id" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Thangapazham</td>
<td><input type="text" id="bonus_temp" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
</tbody>
</table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>

To fix this you need to create a loop which iterates through all the .netpay elements, not just the one which was updated, and generates the total value.
In addition, you need to perform the same action when the checkbox is changed. The logic itself can also be made more succinct and DRY, like this:
$('.bonus-sum').on('input', updateRowTotal);
$('.bonus-in').on('change', updateRowTotal).trigger('change'); // trigger is to set values on load
function updateRowTotal() {
let $tr = $(this).closest('tr');
let salary = parseFloat($tr.find('.wagein').text()) || 0;
let bonus = parseFloat($tr.find('.bonus-sum').val()) || 0
let rowTotal = salary + ($tr.find('.bonus-in:checked').length ? bonus : 0);
$tr.find('.netpay').text(rowTotal.toFixed(2));
updateTotal();
}
function updateTotal() {
let total = 0;
$('.netpay').each((i, el) => total += parseFloat(el.textContent.trim() || 0));
$('#total').text('₹ ' + total.toFixed(2));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<table>
<thead>
<tr>
<th class="text-center"><input type="checkbox" checked="checked" class="checkAll" name="checkAll" /></th>
<th>#</th>
<th>Beneficiary Name</th>
<th class="text-right box">Bonus ₹</th>
<th class="text-right">Salary ₹</th>
<th class="text-right">Net pay ₹</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>1</td>
<td>Chellammal Kochimoni</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>2</td>
<td>Christal Prema G.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>3</td>
<td>Kamalesan T.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Palammal A.</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" class="bonus-in" name="bene_id[]" value="" />
</td>
<td>4</td>
<td>Thangapazham</td>
<td><input type="text" class="bonus-sum" name="bonus_temp[]" value="" /></td>
<td class="wagein">400</td>
<td class="netpay"></td>
</tr>
</tbody>
</table>
</div>
<div>Total Net Pay <span id="total">₹ 0.00</span></div>
Note the removal of all the duplicate id attributes in your HTML . They are invalid, and are not required anyway.

I have introduced new variable totalsum.
Replace the below function .your code will work as expected
<script>
var totalsum=0;
$('.bonus-sum').keyup(function() {
var sum = 0;
var salary = parseFloat($(this).closest('tr').find('.wagein').text());
var bonus = parseFloat($(this).closest('tr').find('.bonus-sum').val()) || 0;
$(this).closest('tr').find('.bonus-in:checked').each(function() {
sum = salary + bonus;
totalsum+=sum;
});
$(this).closest('tr').find('.netpay').text(sum.toFixed(2));
var netpay = 0;
netpay += totalsum;
$('#total').text('₹ ' + netpay.toFixed(2));
});
</script>

jQuery: Loop print only one value

I have below code
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
<script>
jQuery('table#main_table').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
alert(txt);
}
});
I need to check within table if checkbox is checked then print it's qty value. But below code only prints 1 value. Instead of all
What I'm missing?

Your loop is for tr not for table.
jQuery('table#main_table tr').each( function(){
if(jQuery(this).find("input:checkbox").is(':checked')){
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>

You're using each on <table> which will iterate only once as there is only one table with that ID. Iterate over the <tr> elements in the table.
$('#main_table tr').each(function() {
...
jQuery('table#main_table tr').each(function() {
if (jQuery(this).find("input:checkbox").is(':checked')) {
var txt = jQuery(this).find("input[name='qty[]']").val();
console.log(txt);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>
There's better way to do this. Instead of iterating over tr and finding checked checkboxes, you can iterate over checked checkboxes and get the value of the associated textbox.
$(this) // Will refer to the checkbox
.closest('td') // Get parent <td>
.next() // Get next element i.e. next <td>
.find('[name="qty[]"]') // Find element with name attribute value as "qty[]"
.val() // Get it's value
$('#main_table tr :checkbox:checked').each(function() {
console.log($(this).closest('td').next().find('[name="qty[]"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="main_table">
<tr>
<td><input name="" value="3" id="id_3" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="5.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="4" id="id_4" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="2.0000" type="text"></td>
</tr>
<tr>
<td><input name="" value="5" id="id_5" checked="checked" type="checkbox"></td>
<td><input name="qty[]" value="3.0000" type="text"></td>
</tr>
</table>

Trying to have table row get highlighted once a checkbox in the same row gets checked

I apologize in advance for being messy or unclear. It is my first time posting question on a forum regarding coding issue as I am very new at this... I am trying to have the whole table row get highlighted in any color once the checkbox in the gets checked while getting rid of the readonly attribute of other elements in specific row.
<div class="content">
<table style="width: 85%" class="itemTable">
<tr class="itemDesc">
<td></td>
<td>Item Description</td>
<td>Item Number</td>
<td>Box Amount</td>
<td>Individual Amount</td>
<td>Price</td>
<td>Special</td>
</tr>
<tr>
<td><input type="checkbox" class="item-check"></td>
<td>Black Bean(inside yellow)</td>
<td>20021</td>
<td><input type="numbers" class="box-amount" readonly></td>
<td><input type="numbers" class="each-amount" size="6" readonly></td>
<td><input type="numbers" class="price"size="6" readonly></td>
<td><input type="numbers" class="special" size="6" readonly></td>
</tr>
<tr>
this is part of the table I have. Thank you.

Try this one without jQuery:
function checkChanged(){
var ar=event.target.parentElement.parentElement.getElementsByTagName("input");
if(event.target.checked)
{
/*event.target.parentElement.parentElement.style.backgroundColor="rgba(213,113,18,0.4)";*/
event.target.parentElement.parentElement.classList.add("selected");
for(var i=0;i<ar.length;i++){ar[i].removeAttribute("readonly");}
}
else
{ /*event.target.parentElement.parentElement.style.backgroundColor="rgba(255,255,255,1)";*/
event.target.parentElement.parentElement.classList.remove("selected");
for(var i=0;i<ar.length;i++){ar[i].setAttribute("readonly",true);}
}
}
.selected{
background-color:rgba(213,113,81,0.4);
}
<table style="width: 85%" class="itemTable">
<tr class="itemDesc">
<td></td>
<td>Item Description</td>
<td>Item Number</td>
<td>Box Amount</td>
<td>Individual Amount</td>
<td>Price</td>
<td>Special</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item-check" onclick="checkChanged()"/>
</td>
<td>Black Bean(inside yellow)</td>
<td>20021</td>
<td>
<input type="numbers" class="box-amount" readonly/>
</td>
<td>
<input type="numbers" class="each-amount" size="6" readonly/>
</td>
<td>
<input type="numbers" class="price" size="6" readonly/>
</td>
<td>
<input type="numbers" class="special" size="6" readonly/>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item-check" onclick="checkChanged(this)"/>
</td>
<td>Black Bean(inside red)</td>
<td>20022</td>
<td>
<input type="numbers" class="box-amount" readonly/>
</td>
<td>
<input type="numbers" class="each-amount" size="6" readonly/>
</td>
<td>
<input type="numbers" class="price" size="6" readonly/>
</td>
<td>
<input type="numbers" class="special" size="6" readonly/>
</td>
</tr>
</table>

try this one :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".itemTable input:checkbox").click(function() {
$(this).parent().parent().toggleClass("highlight")
})
})
</script>
<style>
.highlight {
background-color:#c9c9c9;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width: 85%" class="itemTable">
<tr class="itemDesc">
<td> </td>
<td>Item Description</td>
<td>Item Number</td>
<td>Box Amount</td>
<td>Individual Amount</td>
<td>Price</td>
<td>Special</td>
</tr>
<tr>
<td><input type="checkbox" name="select" value="#artid#"></td>
<td>Black Bean(inside yellow)</td>
<td>20021</td>
<td><input type="numbers" class="box-amount" readonly></td>
<td><input type="numbers" class="each-amount" size="6" readonly></td>
<td><input type="numbers" class="price"size="6" readonly></td>
<td><input type="numbers" class="special" size="6" readonly></td>
</tr>
</table>
</body>
</html>
source : http://www.raymondcamden.com/2009/11/18/jQuery-Quickie-Highlighting-a-table-row-after-selecting-a-checkbox

You can do it by using a css class for highlighting the row and some basic jquery:
$('.item-check').change(function() {
if (this.checked) {
highlightRow($(this).parents("tr"));
setRowEditable($(this).parents("tr"));
} else {
unhighlightRow($(this).parents("tr"));
setRowUneditable($(this).parents("tr"));
}
});
function highlightRow(row) {
$(row).addClass("highlighted-row");
}
function unhighlightRow(row) {
$(row).removeClass("highlighted-row");
}
function setRowEditable(row) {
$(row).find(".box-amount, .each-amount, .price, .special").each(function() {
$(this).removeAttr("readonly");
});
}
function setRowUneditable(row) {
$(row).find(".box-amount, .each-amount, .price, .special").each(function() {
$(this).attr("readonly", "true");
});
}
.highlighted-row {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<table style="width: 85%" class="itemTable">
<tr class="itemDesc">
<td></td>
<td>Item Description</td>
<td>Item Number</td>
<td>Box Amount</td>
<td>Individual Amount</td>
<td>Price</td>
<td>Special</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item-check" />
</td>
<td>Black Bean(inside yellow)</td>
<td>20021</td>
<td>
<input type="numbers" class="box-amount" readonly />
</td>
<td>
<input type="numbers" class="each-amount" size="6" readonly />
</td>
<td>
<input type="numbers" class="price" size="6" readonly />
</td>
<td>
<input type="numbers" class="special" size="6" readonly />
</td>
</tr>
<tr>
<td>
<input type="checkbox" class="item-check" />
</td>
<td>Black Bean(inside yellow)</td>
<td>20021</td>
<td>
<input type="numbers" class="box-amount" readonly />
</td>
<td>
<input type="numbers" class="each-amount" size="6" readonly />
</td>
<td>
<input type="numbers" class="price" size="6" readonly />
</td>
<td>
<input type="numbers" class="special" size="6" readonly />
</td>
</tr>
</table>
</div>

Try This one
here's the link: http://jsfiddle.net/aqm7kjbg/9/
$("table tr").click(function(){
var a = $(this).find('td input[type="checkbox"]').is(':checked');
if(a === true){
$('.itemTable tr:nth-child('+ (this.rowIndex + 1) + ')').attr('style', 'background-color:red');;
}else{
$('.itemTable tr:nth-child('+ (this.rowIndex + 1) + ')').removeAttr('style');
}
});

Summation using for loop

I want to find the total from the input field and set the total value to the particular text field.
Here is my Html:
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
<tr>
<td>number</td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text"size="5" /></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
<td><input type="text" size="5"/></td>
</tr>
</table>
Here I want to add each adult,young,children field in each row and set the value to the corresponded total column.I used for loop for this purpose. But It Shows some error while adding.
Here is my sample code.
http://jsfiddle.net/3gxnya5a/

You can use a simple loop like
$(document).ready(function () {
$('#table').on('keyup', 'input', function () {
//loop through each 4th td in each rows as they are the sum elements
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function () {
var sum = 0;
//add up the previous 4 values
$(this).prevAll(':lt(3)').find('input').each(function () {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
$(document).ready(function() {
$('#table').on('keyup', 'input', function() {
$("#table tr").slice(2).find("td:nth-child(4n + 1)").each(function() {
var sum = 0;
$(this).prevAll(':lt(3)').find('input').each(function() {
sum += (+this.value || 0)
});
$(this).find('input').val(sum)
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" border="1">
<tr>
<td></td>
<td colspan="4">Injuried</td>
<td colspan="4">Killed</td>
<td colspan="4">Died</td>
</tr>
<tr>
<td></td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
<td>adult</td>
<td>young</td>
<td>children</td>
<td>total</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
<tr>
<td>number</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
<td>
<input type="text" size="5" />
</td>
</tr>
</table>

Already answered, but I felt worth adding an alternative.
If you add attributes to the columns you want to add, your code won't / is less likely to break when you add columns/move them around, eg:
<table id='theTable'>
<tbody>
<tr>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" class='data-add' /></td>
<td><input type="text" size="5" /></td>
<td><input type="text" size="5" class='data-total'/></td>
then
$("#theTable>tbody>tr").each(function() {
var sum = 0;
$(".data-add", this).each(function() {
sum += (+this.value || 0); // stolen from Arun to ignore invalid values etc
});
$(".data-total", this).val(sum);
});

set focus to next nextbox on enter key pressed

HTml
<form action="#">
<table cellpadding="0" cellspacing="0" width="100%" class="formTbl">
<tr>
<td width="20%"><label>ExportDate</label></td>
<td width="30%"><input name="TxtExportDate" type="text" id="TxtExportDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgEExpDate" />
<span id="cvExportDate" style="color:Red;display:none;"></span>
</td>
<td width="20%"><label>UniqueExportId</label></td>
<td width="30%"><input name="TxtUniqueExportId" type="text" id="TxtUniqueExportId" /></td>
</tr>
<tr>
<td><label>Exporter Of Record</label></td>
<td><input name="TxtExporterOfRecord" type="text" id="TxtExporterOfRecord" /></td>
<td><label>Destination</label></td>
<td><input name="TxtDestination" type="text" id="TxtDestination" /></td>
</tr>
<tr>
<td><label>Transport Mode</label></td>
<td><input name="TxtTransportMode" type="text" id="TxtTransportMode" /></td>
<td><label>Carrier</label></td>
<td><input name="TxtCarrier" type="text" id="TxtCarrier" /></td>
</tr>
<tr>
<td><label>AESNo</label></td>
<td><input name="TxtAESNo" type="text" id="TxtAESNo" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAESNo" style="display:none;"></span></td>
<td><label>AESDate</label></td>
<td><input name="TxtAESDate" type="text" id="TxtAESDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgAESDate" />
<span id="cvAESDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Status</label></td>
<td><input name="txtStatus" type="text" id="txtStatus" /></td>
<td colspan="2"></td>
</tr>
<tr>
<td><label>Reference 1</label></td>
<td><input name="TxtReference1" type="text" id="TxtReference1" /></td>
<td><label>Reference 2</label></td>
<td><input name="TxtReference2" type="text" id="TxtReference2" /></td>
</tr>
<tr>
<td><label>Reference 3</label></td>
<td><input name="TxtReference3" type="text" id="TxtReference3" /></td>
<td><label>Reference 4</label></td>
<td><input name="TxtReference4" type="text" id="TxtReference4" /></td>
</tr>
<tr>
<td><label>Reference 5</label></td>
<td><input name="TxtReference5" type="text" id="TxtReference5" /></td>
<td><label>Reference 6</label></td>
<td><input name="TxtReference6" type="text" id="TxtReference6" /></td>
</tr>
<tr>
<td><label>Reference 7</label></td>
<td><input name="TxtReference7" type="text" id="TxtReference7" /></td>
<td><label>Reference 8</label></td>
<td><input name="TxtReference8" type="text" id="TxtReference8" /></td>
</tr>
<tr>
<td><label>Direct ID</label></td>
<td><input name="TxtDirectId" type="text" id="TxtDirectId" /></td>
<td><label>Produced Date</label></td>
<td><input name="TxtProducedDate" type="text" id="TxtProducedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgProduceDate" />
<span id="cvProducedDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Goods Issued Date</label></td>
<td><input name="TxtGoodsIssuedDate" type="text" id="TxtGoodsIssuedDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgGoodIssueDate" />
<span id="cvGoodsIssuedDate" style="color:Red;display:none;"></span>
</td>
<td><label>Shipping Date</label></td>
<td><input name="TxtShippingDate" type="text" id="TxtShippingDate" readonly="readonly" />
<img src="Images/icon-calender.png" id="imgShippingDate" />
<span id="cvShippingDate" style="color:Red;display:none;"></span>
</td>
</tr>
<tr>
<td><label>Part No</label></td>
<td><input name="TxtPartNo" type="text" id="TxtPartNo" /></td>
<td><label>Alternate Part</label></td>
<td><input name="TxtAlternatePart" type="text" id="TxtAlternatePart" /></td>
</tr>
<tr>
<td><label>Unit Of Measuremnt</label></td>
<td><input name="TxtUnitOfMeasuremnt" type="text" id="TxtUnitOfMeasuremnt" /></td>
<td><label>Export Qty</label></td>
<td><input name="TxtExportQty" type="text" id="TxtExportQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvExportQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>Part Description</label></td>
<td><input name="TxtDescription" type="text" id="TxtDescription" /></td>
<td><label>Claim Code</label></td>
<td><input name="TxtClaimCode" type="text" id="TxtClaimCode" /></td>
</tr>
<tr>
<td><label>Avail Qty</label></td>
<td><input name="TxtAvailQty" type="text" id="TxtAvailQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvAvailQty" style="display:none;"></span></td>
<td><label>Cont Qty</label></td>
<td><input name="TxtContQty" type="text" id="TxtContQty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvContQty" style="display:none;"></span></td>
</tr>
<tr>
<td><label>ScheduledB</label></td>
<td><input name="TxtScheduledB" type="text" maxlength="10" id="TxtScheduledB" /></td>
<td><label>HIT</label></td>
<td><input name="TxtHIT" type="text" id="TxtHIT" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvHIT" style="display:none;"></span></td>
</tr>
<tr>
<td><label>FTA Duty</label></td>
<td><input name="TxtFTADuty" type="text" id="TxtFTADuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTADuty" style="display:none;"></span></td>
<td><label>FTA Rate</label></td>
<td><input name="TxtFTARate" type="text" id="TxtFTARate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvFTARate" style="display:none;"></span></td>
</tr>
<tr>
<td><label>US Duty</label></td>
<td><input name="TxtUSDuty" type="text" id="TxtUSDuty" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSDuty" style="display:none;"></span></td>
<td><label>US Rate</label></td>
<td><input name="TxtUSRate" type="text" id="TxtUSRate" onkeydown="return jsAllowNumericChar(event,'decimal');" />
<span id="cvUSRate" style="display:none;"></span></td>
</tr>
<tr>
<td>
<label>
Share Partner Code</label>
</td>
<td>
<input name="TxtSharePartnerCode" type="text" id="TxtSharePartnerCode" />
</td>
<td><label> Contract Number </label> </td>
<td>
<input name="txtContractNumber" type="text" maxlength="15" id="txtContractNumber" class="TextBox" autocomplete="Off" />
</td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="submit" name="BtnAdd" value="Save" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("BtnAdd", "", true, "AddExport", "", false, false))" id="BtnAdd" class="blueBtn" />
<input type="submit" name="BtnCancel" value="Cancel" id="BtnCancel" class="blueBtn" />
</td>
</tr>
</table>
<input type="submit" value="submit"/>
</form>
Javascript
$("input").bind("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
$(this).nextAll("input").eq(0).focus();
}
});
I have update this fiddle
http://jsfiddle.net/andrewwhitaker/GRtQY/
with this
fiddle
http://jsfiddle.net/mparvez1986/L8Ax7/
but updated fiddle is not working, please help

That's because .nextAll() only selects the next siblings and in your first fiddle inputs are siblings which is not case in the second fiddle. The better option in your case is using the .index() method:
var $inputs = $("input").on("keydown", function(event) {
if (event.which === 13) {
event.stopPropagation();
event.preventDefault();
// `i` is the index of the current element
// in the cached jQuery collection
var i = $inputs.index(this);
$inputs.eq(i+1).focus();
}
});
http://jsfiddle.net/6S7Kc/

We Keep Coding

JavaScript is the programming language of the Web.

PHP: Getting work days and closed days based on checkbox - javascript

Related

how to get the sum of all row value in jquery

jQuery: Loop print only one value

Trying to have table row get highlighted once a checkbox in the same row gets checked

Summation using for loop

set focus to next nextbox on enter key pressed

Categories

Resources