0

私は私の質問に対するすべての答えを徹底的に調べましたが、私にとっては何もうまくいかないようです。テーブルの行の色を点滅させたい

コードは次のとおりです。現在、点滅せずに紫色のみを表示しています

$(document).ready(function() {
    openticketPageLoad();
    setInterval(findYellow, 1000);

    function findYellow() {
        $('#divOutputWindow').find('tr').each(function() {
            var $this = $(this);
            if ($this.css("background-color") == "purple") {
                $this.css("background-color", "white")
            } else {
                $this.css("background-color", "purple")
            }
        })
    }
});

HTMLは、jQuery（CSS）+ Ajax+CSファイルの背後にあるいくつかのコードを使用して生成されます。これは「要素の検査」から取得したコードです。

<tr class="ui-state-default2 ui-pgrid-table-row-visible" style="background-color: purple; "><td class="ui-pgrid-table-expander"></td>
            <td class="ui-pgrid-table-cell-sorted"><input name="ctl391" type="checkbox" id="chkTicket_189293" class=" chkTicket" value="189293"></td><td>189293</td><td><input name="ctl392" type="text" id="txtVendorTicket_189293" class=" vendorTicket" onblur="" value=""></td><td>SWCW35216</td><td>FLM</td><td>SDB CISCO</td><td>Open</td><td>CASH HANDLER FATAL ERROR,CASSETTE FAULTED</td><td>04-08-2012 13:36:31</td><td>04-08-2012 14:05:00</td><td>4.52</td><td>System</td>
        </tr>
4

4 に答える 4

1

background-colorは、ほぼ確実に「紫」の値を返しません。これは、rgbまたはhex値のいずれかを返します（これはブラウザーに依存すると思います）。したがって、「紫」に関連する同等のrgbまたはhex値に対してテストする必要があります。

このため、コードは常にif/elseステートメントのelse部分に移動します。したがって、常に紫色の背景色を生成します。

于 2012-08-04T12:58:40.753 に答える
0

これは、$ this.css（ "background-color"）が文字列としてではなく、rgbまたはrgbaの色指定として提供されるためです。

代わりにクラスを使用してください：

.purple {
  background-color: purple;
}
.white {
  background-color: white;
}

と

 $(document).ready(function() {
        openticketPageLoad();
        setInterval(findYellow, 1000);
        function findYellow() {
            $('#divOutputWindow').find('tr').each(function() {
            var $this = $(this);
            $this.toggleClass('purple');
            $this.toggleClass('white', !$this.hasClass('purple'); // toggle to white if it's not purple
            })
        }
    });

実際の動作をご覧ください：http：//jsfiddle.net/xWRZx/

于 2012-08-04T13:02:49.313 に答える
0

.cssゲッターはプロパティを取得せず.style、または（IEの場合getComputedStyle）.currentStyleを取得します。したがって、要素にプロパティ.cssを設定するセッターと対称ではありません。.style

したがって、このような色を確実に取得することはできず、値はブラウザ間で異なる可能性があるため、色正規化ライブラリを使用する必要があります。

ただし、cssクラスを使用するだけでよいため、ユースケースではこれは必要ありません。

于 2012-08-04T13:10:45.737 に答える
0

よりシンプルでセマンティックなソリューションを提案します。

HTML

<div id="divOutputWindow">
    <table>
        <tr>
            <td>foo</td>
            <td>bar</td>
        </tr>
        <tr>
            <td>hello</td>
            <td>world</td>
        </tr>
        <tr>
            <td>lazy</td>
            <td>fox</td>
        </tr>
    </table>
</div>​

CSS

#divOutputWindow tr {
    background-color: white;
}

#divOutputWindow tr.highlighted {
    background-color: purple;
}
​

JS

setInterval(findYellow, 1000);
function findYellow() {
    $('#divOutputWindow').find('tr').each(function() {
        $(this).toggleClass('highlighted');
    });
}​

ライブデモ

http://jsfiddle.net/Y6NwR/

于 2012-08-05T04:37:13.530 に答える