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

行の非表示の値に応じて、css クラスを行に追加する jQuery

        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 をこれに更新して、最初の TD 用と最後の TD 用の 2 つの CSS クラスを追加しました。

$(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 のスタイルを変更して、別のものにしようとするのはどうでしょうか。

これがスタックのリンクです。ただし、個々の td セルに対応するように jQuery を変更する必要があり、これにはもう少し手間がかかります。

于 2012-08-27T18:21:42.020 に答える