asp.net-mvc – 更改表中给定行的背景颜色

发布时间：2020-12-16 09:49:23 所属栏目：asp.Net 来源：网络整理

导读：我需要根据@ Html.CheckBox中使用的model(boolean)属性的值来更改表中给定行的背景颜色.使用PostExampleCompleted操作方法中的新复选框值更新模型. table thead tr thItem name/th thComments/th thUser/th thComplete/th /tr /thead tbody tr id="FooRow" t

我需要根据@ Html.CheckBox中使用的model(boolean)属性的值来更改表中给定行的背景颜色.使用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",OnComplete = "HideProcessingMsg" })) 
                {
                    @Html.CheckBox("WidgetItemComplete",Model.WidgetComplete,new { onClick = "$(this).parent('form:first').submit();" })
                }
            </td>
        </tr>
    </tbody>
</table>

实现这一目标的最佳方法是什么？代码示例将不胜感激:).

谢谢.

解决方法

这样的事情应该可以解决问题,因为我已经理解了你正在努力做的事情.

首先,这是一个css类,如果选中复选框,我会用它来为行着色.

.redBackground
{
    background-color: Red;
}

接下来,这里有一些JQuery代码,用于为复选框所在的行着色(如果已选中).我还为每个复选框添加了一个“更改”处理程序,因此如果更新它们中的任何一个,就会适当更新行颜色(我刚刚使用红色表示检查复选框的行,并且没有颜色在哪里未选中复选框).

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

希望这有道理……

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!