Question

Within a table, change color of row based on drop-down field

Forms

Updated December 30, 2014

asked on December 19, 2014

Laserfiche Forms 9.2.

The first field in my table is a drop-down with three options. I want to change the color of the text for all the fields in that row depending on which selection is made. I would appreciate advice on how to approach this problem.

0 0

Answer

SELECTED ANSWER

replied on December 30, 2014

That's easy to fix. What's happening is that the code attaches the 'change' event handler directly to whatever rows you have visible when the form loads. Any rows added after that will not trigger the event. To change this behavior, you just need to set up the event handler to be a delegated event handler, using the on() function in jquery. Just add a CSS class to your table like "MyTable" and adjust the javascript code a bit like so:

$(document).ready( function() {
 
$('.MyTable').on('change','.ColorSelect select', function() {
    if ($(this).val() == "Red"){
        $(this).closest("tr").addClass("RedRow");
    }else{
        $(this).closest("tr").removeClass("RedRow");
    }
});
	 
});

3 0

Replies

replied on December 22, 2014

There's probably a few ways you could go about this. I'd make a set of CSS Classes/Rules to define your colors, then use javascript to assign the class to the table row based on your drop down selection.

Let's say I want the row to become red, when the dropdown choice is set to "Red".

First, write the CSS to define how to display the "RedRow" class:

tr.RedRow {color:#f00;}
tr.RedRow input, tr.RedRow select {color:#f00;}

These two rules just color the standard text, input text, and select text to be red (#f00).

Next add a CSS class to your drop-down in the table. Do this from the advanced tab of the settings page on the forms designer, where you initially set up your table. I'll give mine a class of "ColorSelect"

Finally add some javascript to respond whenever this drop-down content changes, and add the class to the "tr" element for the proper row of the table.

$(document).ready( function() {

$('.ColorSelect select').change( function() {
	if ($(this).val() == "Red"){
		$(this).closest("tr").addClass("RedRow");
	}else{
		$(this).closest("tr").removeClass("RedRow");
	}
});

});

All this does is check the value of the drop down and either add or remove the "RedRow" class to the parent "tr" element. When the class is added, it will trigger the CSS rules to apply to the row. Otherwise, they'll display with the default colors.

0 0

replied on December 30, 2014

Thanks for the answer Scott.

This seems promising, but I have a quirk in my testing where only the first table row will turn red when red is selected. Subsequent rows are black regardless of dropdown selection.

Screenshot attached.

forms red row.png (65.66 KB)

| Download

0 0

SELECTED ANSWER

replied on December 30, 2014

$(document).ready( function() {
 
$('.MyTable').on('change','.ColorSelect select', function() {
    if ($(this).val() == "Red"){
        $(this).closest("tr").addClass("RedRow");
    }else{
        $(this).closest("tr").removeClass("RedRow");
    }
});
	 
});

3 0

replied on December 30, 2014

Marked as the answer. That was exactly what I needed.

Thanks so much Scott!

0 0

You are not allowed to follow up in this post.

Question

Question

Within a table, change color of row based on drop-down field

Answer

Replies

Sign in to reply to this post.