Home/ Questions/Q 290613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T06:00:50+00:00

EDIT: I am also after advice if there is a better way to go

  • 0

EDIT: I am also after advice if there is a better way to go about this??

I have a webpage that displays a timesheet for the user to fill out.
The timesheet is for a month so it has as many rows in the month
and also 5 columns of data, Normal hours, extended hours, shift hours
holidays hours and total.

I have a dropdown list that allows the user to select the month
and year textbox.

When they select a month the code then disbles the bottom
rows if they are not required due to not havving say 31 days as
an example. It also then sets the background color of each
row depending on if it is a weekend( in a different color) or not.

Problem is when the month is selected it is taking 3-4 secs to
run the code and is annoying for the user as they dont know
what is happening.

Is there any way of improving this that you can see? The code
is shown below.

    $('[id$=lstMonth]').change(function() {
        MonthChange();
    });         
});

function MonthChange() {

    var month = parseInt($('[id$=lstMonth]').val())-1;
    var year = $('[id$=txtYear]').val();
    var daysInMonth = GetDaysInMonth(month, year);
    var day, dte, bgcolor;

    for(day=28; day<=31; day+=1) {
        if(day > daysInMonth)
            DisableRow(day);
        else
            EnableRow(day);
    }

    for(day=1; day<=daysInMonth; day+=1) {
        dte = GetDate(day, month, year);
        bgcolor = GetInputFieldColor(dte, false);
        SetBackgroundColor(day, bgcolor);
    }
}

function SetBackgroundColor(day, bgcolor) {
    var selector = '[id$=txtNormal' + day + ']';

    $(selector).css("background-color", bgcolor);
    $(selector).parent().css("background-color", bgcolor);

    selector = '[id$=txtExtended' + day + ']';
    $(selector).css("background-color", bgcolor);
    $(selector).parent().css("background-color", bgcolor);

    selector = '[id$=txtShift' + day + ']';
    $(selector).css("background-color", bgcolor);
    $(selector).parent().css("background-color", bgcolor);

    selector = '[id$=txtHoliday' + day + ']';
    $(selector).css("background-color", bgcolor);
    $(selector).parent().css("background-color", bgcolor);

    selector = '[id$=txtTotal' + day + ']';
    $(selector).css("background-color", bgcolor);
    $(selector).parent().css("background-color", bgcolor);
}

function DisableRow(day) {
    var selector = '[id$=txtNormal' + day + ']';

    $(selector).css("background-color", "red");
}

function EnableRow(day) {
    var selector = '[id$=txtNormal' + day + ']';

    $(selector).css("background-color", "blue");
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are using all over your code, attribute selectors without specifying the element type.

    This is not well performing, since all your DOM elements are inspected, for example:

    You are also using endsWith [id$=xxx] this is really needed for your case??

    I would consider rewriting your SetBackgroundColor function as this also for readability:

    function SetBackgroundColor(day, bgcolor) {
  var types = ['Normal', 'Extended', 'Shift', 'Holiday'];

  $.each(types, function(index, type){
    var selector = 'input[id$=txt' + type + day + ']'; // change input to your
                                                       // element type
                //'#txt' + type + day; or if you don't need the endsWith selector
    $(selector).css("background-color", bgcolor)
               .parent()
               .css("background-color", bgcolor);
    // 1 selector call, and using chaining
  });
}
    • 0