Изменение цвета фона данной строки в таблице

Question

Мне нужно изменить цвет фона данной строки в таблице на основе значения свойства модели (логическое), которое используется в @ Html.CheckBox.Модель обновляется новым значением флажка в методе действия PostExampleCompleted.

<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>

Каков наилучший способ добиться этого?Буду признателен за примеры кода:).

Спасибо.

Answer 1

Что-то вроде этого должно сработать, учитывая, что я понял, что вы пытаетесь сделать правильно.

Сначала вот класс css, который я использовал для окрашивания строки, если установлен флажокфлажок.

.redBackground
{
    background-color: Red;
}

Далее приведен код JQuery для окрашивания строки, в которой находится флажок, если он установлен.Я также добавил обработчик «change» для каждого флажка, поэтому, если какой-либо из них обновляется, цвет строки обновляется соответствующим образом (я только что использовал красный для строки, где установлен флажок, а цвет отсутствуетфлажок не установлен).

<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's 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>

Надеюсь, это имеет смысл ...:)

Answer 2

Код немного мал, чтобы точно получить, что ваши настройки.

Из того факта, что у вас есть Элемент I, я делаю вывод, что в таблице несколько строк.Лично я бы возражал против наличия AjaxForm в каждой из строк.Это похоже на много накладных расходов.

Вы могли бы очень легко иметь единую конструкцию кода jQuery для обработки всех строк и выполнения необходимых задач самостоятельно.

Если вы используете живую функцию jQuery, вы даже не зависите от добавляемых строк.

Флажок или строка должны иметь идентификатор, с помощью которого вы можете отправить вызов ajax обратно на вашконтроллер.В случае успеха вы можете оценить состояние флажка и соответствующим образом покрасить строку.

Мне бы хотелось увидеть больше кода, чтобы действительно помочь вам в этом.

Answer 3

Может быть, я что-то упустил.Это похоже на работу для HTML или CSS.Насколько я могу судить, есть несколько способов подойти к этому в зависимости от ваших требований.

Построчно (т. Е. Вы никогда не узнаете, какие цвета, пока они не будут определены где-топриложение или в базе данных, где статическое сохранение их значения не является обязательным), присвойте свойству стиля html <tr style='background-color: @Model.Colour'> в строке, чтобы задать background-color желаемый цвет.

Для типа / состоянияоснова (т. е. вы знаете, какие цвета будут опережать время, а не какие строки они будут назначены), я бы определил класс для каждой строки: <tr class='@Model.Type'>, а затем назначил background-colorв вашем CSS-классе с тем же именем, что и значение в Model.Type.

Чтобы получить этот цвет / тип, вы захотите передать его, используя вашу модель.Возможно, у вас уже есть это свойство в вашей модели, я не знаю.

Для простых чередующихся шаблонов, просто используйте эту технику или селекторы :nth-child(odd) и :nth-child(even) css.

Иногда самые простые решения - лучшие решения.