Changing the background color of a given row in a table

Question

I need to change the background color of a given row in a table based on the value of the model property (boolean) that is used in @ Html.CheckBox. The model is updated with the new flag value in the PostExampleCompleted action method.

<table> <thead> <tr> <th>Item name</th> <th>Comments</th> <th>User</th> <th>Complete</th> </tr> </thead> <tbody> <tr id="FooRow"> <td>Foo</td> <td>@Model.FooComments</td> <td>@Model.FooUserName</td> <td> @using (Ajax.BeginForm("PostFooCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" })) { @Html.CheckBox("FooItemComplete", Model.FooComplete, new { onClick = "$(this).parent('form:first').submit();" }) } </td> </tr> <tr id="WidgetRow"> <td>Widget</td> <td>@Model.WidgetComments</td> <td>@Model.WidgetUserName</td> @using (Ajax.BeginForm("PostWidgetCompleted", "Home", new AjaxOptions { OnBegin = "ShowProcessingMsg", OnComplete = "HideProcessingMsg" })) { @Html.CheckBox("WidgetItemComplete", Model.WidgetComplete, new { onClick = "$(this).parent('form:first').submit();" }) } </td> </tr> </tbody> </table> 

What would be the best way to achieve this? Code examples would be appreciated :).

Thanks.

Answer 1

Something like this should do the trick, given that I understood what you're trying to do right.

First up is the css class that I used to color the string, if checked.

 .redBackground { background-color: Red; } 

Next, here is some jQuery code to color the line the checkbox is set to, if one is checked. I also added a “change” handler for each checkbox, so if any of them is updated, the color of the line is updated accordingly (I just used red for the line in which the checkbox is checked, and there is no color where the checkbox is not checked) .

 <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function () { $('input[type=checkbox]').each(function () { var checkbox = $(this); // if the checkbox is already checked, colour its row CheckStatus(checkbox); //Every time a check-box status changes we //want to re-evaluate the row colour checkbox.change(function () { CheckStatus(checkbox); }); }); //Method which checks if the check-box is checked. If it checked //the row is given the 'redBackground' class, otherwise it is taken away function CheckStatus(checkbox) { if (checkbox.attr('checked') == 'checked') { checkbox.parent().parent().addClass('redBackground'); } else { checkbox.parent().parent().removeClass('redBackground'); } } }); </script> 

Hope this makes sense ... :)

Answer 2

The code is a little small to get the settings exactly.

From the fact that you have an element, I come out that you have several rows in the table. Personally, I would mind having AjaxForm on each line. This seems like a lot of overhead.

You can easily create a single jQuery code construct to handle all the lines and complete the necessary tasks yourself.

If you use the jQuery live function, you are not even dependent on the rows you add.

The flag or line must have an identifier with which you can send an ajax call back to your controller. If successful, you can evaluate the state of the flag and color the line accordingly.

I would need to see more code to really help you with this.

Answer 3

Maybe I missed something. This seems to work for html or css. As far as I can figure out, there are several ways to approach this depending on your requirements.

In a line by line (i.e. you will never know what colors will be until they are defined somewhere in the application or in the database where the static storage of the value is not statically), set the html style <tr style='background-color: @Model.Colour'> in the line to set background-color to the desired color.

Based on the type / state (i.e. you know what colors will be ahead of time, but not which rows they will be assigned), I would define a class for each row: <tr class='@Model.Type'> and then assign background-color to your CSS class with the same name as the value in Model.Type.

To get this color / type, you will want to convey it using your model. Perhaps you already have this property on your model, I don’t know.

For simple alternating patterns, simply use this technique or selector :nth-child(odd) and :nth-child(even) css.

Sometimes the simplest solutions are the best solutions.