How to use Loop for Dropdown field for all rows in a table using classes

asked on January 18, 2016

Please refer image of the form below

We have a single table for each day of the week and each day of the week can have 3 rows
using "ADD" button. For field "Entitlements" class is "ENT" across the table. For field "Hours/Unit"class is "HrsUnit" across the table.

For each row we have a dropdown field "Entitlements" and based on the selection of this
field, we populate the "Hours/Unit" field. The business rule for this is:

ACO(value 1) ==> "Hrs/Unit" should be "1" and Readonly
ATR(value 2) ==> "Hrs/Unit" should be "1" and Readonly
ECO(value 3) ==> "Hrs/Unit" should be more than "4"
MU 1 & 2(value 4) ==> "Hrs/Unit" is an open field
PC 1 & 2(value 5) ==> "Hrs/Unit" is an open field
PHW(value 6) ==> "Hrs/Unit" is an open field
SBR(value 7) ==> "Hrs/Unit" should be "1" and Readonly

That code is as below:
//***Entitlement and Hrs/Unit

$('.cf-table-block').on('change', Entitle);
function Entitle() {

$('.cf-table-block tbody tr').each(function () {

var entHrUn = "";
var chkEnt = "";
$(this).find('.ENT option:selected').each(function () {

entHrUn = $(this).val();

if(entHrUn == "1" || entHrUn == "2" || entHrUn == "7"){
$('.HrsUnit input').val('1').attr('readonly', 'readonly');
}
else {
$('.HrsUnit input').removeAttr('readonly');

}

chkEnt = $('.HrsUnit input').val();

if(entHrUn == "3" && chkEnt < "4"){
alert('Invalid Input');
}

});

});

}

//***Entitlement and Hrs/Unit COMPLETE

As can be seen, we have written a loop for all days of the week, to follow the above logic,
using classes, but this fails. We were able to achieve this using id's but then we will
have to code individually for each row for each day that is 21 rows. Could you please help
us to resolve this issue using the classes or please provide us with an efficient solution.

Note: In the same attached form we were able write code for a similar case as above where
using input of fields "Start Time", "Finish Time" and "Break" we calculate "Total Hours" for each row for all rows of the week. For field "Start Time" class is "TimeIN" for "Finish Time" class is "TimeOUT" for field "Break" class is "Lunch" for field "Total Hours" class is "TotalHours" across the table. That code is as below:

//****Subtract InTime and OutTime

$('.cf-table-block').on('blur', 'input', SumHours);
function SumHours() {
var sum = 0;

$('.cf-table-block tbody tr').each(function () {
var s = 0;
var t=0, h=0, m=0;
    var x=0, y=0, p=0;

$(this).find('.TimeIN input').each(function () {
t=$(this).val().split(':');
h=parseInt(t[0], 10);
m=parseInt(t[1], 10);
s -= parseNumber(h+(m/60));
y = parseNumber(h+(m/60));
});

$(this).find('.TimeOUT input').each(function () {
t=$(this).val().split(':');
h=parseInt(t[0], 10);
m=parseInt(t[1], 10);
var x = parseNumber(h+(m/60));

if (x < y)
s = s + 24 + parseNumber(h+(m/60));

else

s += parseNumber(h+(m/60));
});
$(this).find('.Lunch input').each(function () {
s -= parseNumber($(this).val()/60);

});


if(s >0){
$(this).find('.TotalHours input').val(s);
sum += s;
}
});

}//****Subtract InTime and OutTime COMPLETE

function parseNumber(n) {
var f = parseFloat(n); //Convert to float number.
return isNaN(f) ? 0 : f; //treat invalid input as 0;
}//****Subtract InTime and OutTime Function COMPLETE

We appreciate any feedback or suggestions and Thank you in advance.

Rajesh

0 0

SELECTED ANSWER

replied on January 19, 2016

Hi Rajesh,

In your "Entitlement and Hrs/Unit" code, you don't really need the ".each" loops because you are only interested in one row at a time. You can target the specific row you want in the function and apply changes to only that row. For example, when an Entitlement drop-down changes, you can target its corresponding Hours/Unit input field. Here is one way of achieving this:

$(document).on('change', '.ENT select', function(){
  var $Ent = $(this).val();
  var $HrsUnit = $(this).closest('tr').find('.HrsUnit input');
    
  $HrsUnit.val('').prop('readOnly', false).removeClass('ECO');
    
  if ($Ent == 1 || $Ent == 2 || $Ent == 7){
    $HrsUnit.val(1).prop('readOnly', true);
  }
  else if ($Ent == 3){
    $HrsUnit.addClass('ECO');
  }
});
$(document).on('change', '.ECO', function(){
  if ($(this).val() < 5){
    $(this).val('');
    alert('ECO Hours/Unit must be greater than four');
  }
});

Let me know if this works for you!

2 0

Question

Question

How to use Loop for Dropdown field for all rows in a table using classes

Answer

Replies

Sign in to reply to this post.