0

在 Gridview 中，我根据某些条件添加了一个行 CSS 类。这个类在行的边框上添加了一个插入框阴影，它在 FireFox 中运行良好。在 IE 中，它添加了行阴影，但它在单元格级别添加它，因此单元格左侧和右侧的单元格边框也被突出显示。当我只想突出显示该行时，这会显示每个带有插入发光的单元格边框。

Chrome 的行为类似于 IE，但没有插入框阴影。它只为边框着色。

正如我所说，它在 FF 中看起来不错。关于如何在 IE 和 Chrome 中纠正这个问题的任何想法，其中框阴影只为边框着色，但我可以接受。

CSS类

.rowGlow
{
border-collapse:separate;
border-color:#ff0000;

box-shadow:inset 0 0 3px 1px  #ff0000; 
-moz-box-shadow:inset 0 0 3px 2px #ff0000;
-webkit-box-shadow:inset 0 0 3px 2px #ff0000;
}

行标签

<tr class="rowGlow" style="color:#333333;background-color:#F7F6F3;">

jQuery将css类添加到行中，具体取决于行中的隐藏值

        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {if (args.get_error() == undefined) {alertTest();}}

    function alertTest() {
        $(document).ready(function () {
            $('tr').each(function () {
                if ($(this).find('input[type=hidden]').val() == 'False') {
                    var du = <%= DateUpdates() %>;
                    if(du){$(this).addClass('rowGlow');}
                }
            });
        });
    }

    alertTest();

这就是我最终的结果。更新 jQuery 以添加两个额外的 CSS 类，一个用于第一个 TD，一个用于最后一个 TD：

$(this).addClass('rowGlow').find('td:first-child').addClass('firstCell');
$(this).find('td:last-child').addClass('lastCell');
.rowGlow
{
-webkit-box-shadow:inset 0 -3px 3px -1px #ff0000,inset 0px 3px 3px -1px #ff0000;
-moz-box-shadow:   inset 0 -2px 3px -1px #ff0000,inset 0px 2px 3px -1px #ff0000;
box-shadow:        inset 0 -3px 3px -1px #ff0011,inset 0px 3px 3px -1px #ff0000;    
}

.firstCell
{
-webkit-box-shadow: inset 3px 0px 3px -2px #ff0000;
-moz-box-shadow:    inset 3px 0px 3px -2px #ff0000;
box-shadow:         inset 3px 0px 3px -2px #ff0000;
    }
.lastCell 
{
-webkit-box-shadow: inset -3px 0px 3px -2px #ff0000;
-moz-box-shadow:    inset -3px 0px 3px -2px #ff0000;
box-shadow:         inset -3px 0px 3px -2px #ff0000;
}

<!-- For IE8 and lower I have this conditional -->
    <!--[if lt IE 9]>
    <style type="text/css">
        .rowGlow {
                background-color: #F9ACAA !important;
                /* color: #000!important; */
        }
    </style>
<![endif]-->
4

1 回答 1

1

尝试将行中的 :first-child 和 :last-child TD 设置为不同的样式怎么样。

这是堆栈上的链接。但是，您将不得不更改您的 jQuery 以适应各个 td 单元格，这将需要更多的工作。

于 2012-08-27T18:21:42.020 回答