0

私は JQuery プログラミングにまったく慣れていないので、少し助けが必要です!

私は ASP.NET ピボット テーブルを持っており、そのテーブルのセルには 1、2、3、または 4 のさまざまな値があります。どの値を選択しても、セルは 4 つの色のいずれかに変わります。コードはfirebugで機能しますが、ページヘッダーのタグに配置すると機能しません。

私は何を間違っていますか？

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js">



    $(document).ready(function () {

        $(".myGridView1 tr").each(function () {



            $("td").filter(function () { return $.text([this]) == '1'; }).css('background', 'green');

            $("td").filter(function () { return $.text([this]) == '2'; }).css('background', 'orange');

            $("td").filter(function () { return $.text([this]) == '3'; }).css('background', 'red');

            $("td").filter(function () { return $.text([this]) == '4'; }).css('background', 'blue');

        });

    });



</script>
4

5 に答える 5

2

各スクリプトには、次のように独自のタグが必要です。

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".myGridView1 tr").each(function() {
        $("td").filter(function() {
            return $.text([this]) == '1';
        }).css('background', 'green');

        $("td").filter(function() {
            return $.text([this]) == '2';
        }).css('background', 'orange');

        $("td").filter(function() {
            return $.text([this]) == '3';
        }).css('background', 'red');

        $("td").filter(function() {
            return $.text([this]) == '4';
        }).css('background', 'blue');

    });
});​
</script>

その理由は、Javascript が指定されたタグ (URL を指定した場合) で html に読み込まれ、私の知る限り、現在 script タグ内にあるものを上書きするためです。<script>したがって、URL が設定されたタグ内に何かがある場合、それはオーバーライドされて実行されません。

また、jQuery プログラミングではなく、Javascript プログラミングです。jQuery は Javascript で使用するライブラリです。

于 2012-05-07T20:34:16.157 に答える
2

属性が存在する場合、 a の内容scriptは無視されます。srcつまり、2 つのタグが必要です。1scriptつは jQuery を含めるため、もう 1 つはコード用です。また、必要以上に多くの作業を行っています。

$(function () {
   $(".myGridView1 tr td:contains(1)").css('background', 'green');
...
});

おそらくさらに統合することができます。いくつかのメモ:

$.text([this])と大差ありません$(this).text()..後者が好まれます.

セレクターはドキュメント全体で動作するため、あなた.eachは無意味です。本当にセレクターをコンテキストとして$("td")使用したい場合は、 . ただし、使用する必要さえないと思います。これは単なる追加の関数呼び出しです。.each$("td", this).each

最後に、 で:containsやろうとしていることにセレクターを使用できます.filter。メソッドが非常に複雑であるか、チェーンに使用したい場合を.filter除き、セレクターとは対照的に使用する理由はあまりありません。.filter

于 2012-05-07T20:41:25.417 に答える
1

ページ コードを含む同じタグに外部スクリプトを含めることはできません。別の空のタグである必要があります。

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>
   // my script
</script>

さらに、いくつかの注意事項：

この.each()関数は、フィルター関数を何度も実行することを除いて、コード内で何もしません。各 について、現在の行のものだけでなく、すべてtrのを見ています。を取り出しても、コードは引き続き機能します。 td.each()

デモ: http://jsfiddle.net/jtbowden/dgswh/

次に、フィルタリングする代わりに、関数を.css()呼び出しに追加します。

var colors = {'1': 'green', '2': 'orange', '3': 'red', '4': 'blue' };

$("td").css('background-color', function(index, value) {
    var txt = $(this).text();
    if(colors.hasOwnProperty(txt)) {
        return colors[txt];
    }
    return value;
});

デモ: http://jsfiddle.net/jtbowden/dgswh/2/

これにより、コードが 4 回ではなく 1 回の呼び出しに削減されます (各 に対して 1 回だけ実行されますtd)。そのテーブルだけに限定したい場合は、セレクターを変更します。

$(".myGridView1 td").css('background-color', function(index, value) { ... });

ファローアップ

td色を変更した後に からテキストを削除するには、次のようにします。

$("td").css('background-color', function(index, value) {
    var txt = $(this).text();
    $(this).text("");  // ADD THIS LINE
    if(colors.hasOwnProperty(txt)) {
        return colors[txt];
    }
    return value;
});

td一致する のテキストのみを削除する場合は、次の行を移動します。

$("td").css('background-color', function(index, value) {
    var txt = $(this).text();
    if(colors.hasOwnProperty(txt)) {
        $(this).text("");  // MOVE TO HERE
        return colors[txt];
    }
    return value;
});

スタイルを設定せずにテーブル セルを空にすると、幅が 0 になるか、行のすべてのセルが空の場合、行が高さが 0 になる可能性があることに注意してください。この場合は、CSS にmin-heightとのmin-width定義を追加するか、次のように変更します。td$(this).text("")$(this).html('&nbsp;')

デモ: http://jsfiddle.net/jtbowden/dgswh/5/

番号を保持したいが、表示したくない場合は、の内容をtdhidden または invisibleでラップできdivます。

$(this).wrapInner("<div style='visibility:hidden'>");

または：

$(this).wrapInner("<div style='display:none'>");

デモ: http://jsfiddle.net/jtbowden/dgswh/6/

于 2012-05-07T21:13:56.623 に答える
0 
<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">

    $(function(){

        $(".myGridView1 td").each(function () {

            var that = $(this)

            switch( that.text() ){

                  case '1': that.css('background', 'green');
                  break;

                  case '2': that.css('background', 'orange');
                  break;

                  case '3': that.css('background', 'red');
                  break;

                  case '4': that.css('background', 'blue');
                  break;
            } 

        });

    });
</script>

ちょうど私の2セント。新しいjQueryオブジェクトを作成することは避けてください（あまり$良くありません）。フィルターもかなり非効率的です。このようにして、各jQueryオブジェクトが1回作成され、各関数が1回実行されます。

于 2012-05-07T20:49:17.720 に答える
0

間違った script タグについて話しているわけではないと仮定すると、解決策は次のとおりです。

CSS:

.td1 {background-color:green}
.td2 {background-color:orange}
etc



$(".myGridView1 td").each(function() {
   $(this).addClass('td' + $(this).text());

 });
于 2012-05-07T20:43:03.160 に答える