Form Javascript - Set field colors for table by row

asked on October 16, 2019 • Show version history

I am trying to set colors for table fields only based on their respective row.

$(document).ready(function () {
    $('.cf-table-block').on('change lookup', 'input', tablecheck);

    function tablecheck() {

	$('.cf-table-block tbody tr').each(function () {
            if($(this).find('.tbl_jobId input').val() !=' '){
          	$(this).find('.tbl_jobId input').css('background-color','#EFDFE0');
                $(this).find('.breakDropdown1 select').css('background-color','#EFDFE0');
            }
	});
    }
});

I was wondering if I was missing something to call on a per row basis versus it updating the entire table for that column.

I'm not sure how to iterate a for loop on a dynamic table and use the current iteration "i" to reference the field.

1 0

SELECTED ANSWER

replied on October 17, 2019

I actually think your code is correct although on your if statement you are saying if the value is not equal to " ". I take it you are trying to say if it is blank then colour the fields red? Although " " is actually a space value and none of your fields are spaces, i think just a "" with no space would work correctly.

But currently as none of the fields are a spaces all rows will be coloured red, so this is not a looping issue, you are already targeting each row individually.

Hope this helps

1 0

View 2 previous replies

replied on October 17, 2019

Ah. Yup thanks a ton. Looking at this over and over and I didn't even care to look at the if not equal to blank actual being white space.

Thank you!

1 0

replied on October 17, 2019

No problem!! Its always something small that you spend the most time figuring out

1 0

replied on October 17, 2019

Please could you mark as answer, have a great day!

0 0

replied on October 20, 2019

Hmm there's no option for me to mark a post as an answer anymore. I'm not sure if they changed this functionality?

0 0

replied on October 20, 2019

On another note, I added some logic to this so the field background color should be reset in the event another value is selected.

$(document).ready(function () {
    $('.cf-table-block').on('change lookup', 'input', tablecheck);

    function tablecheck() {

	$('.cf-table-block tbody tr').each(function () {
            if($(this).find('.tbl_jobId input').val() !=' '){
          	    $(this).find('.tbl_jobId input').css('background-color','#EFDFE0');
                $(this).find('.breakDropdown1 select').css('background-color','#EFDFE0');
            }else {
            	$(this).find('.tbl_jobId input').css('background-color','');
                $(this).find('.breakDropdown1 select').css('background-color','');
            }
	});
    }
});

I added and `else` in order to reset the field background color in the event populates after.

But one/c the red is added to the background color, it doesn't look like the field value is able to change, the else is never run on any field change. Might be due to my on('change lookup', input...)

0 0

Question

Question

Form Javascript - Set field colors for table by row

Answer

Replies

Sign in to reply to this post.