0

次のようなインラインCSSのインスタンスがいくつかあります...

<td id="problem_display" style="border-right:solid 2px #378DE5; border-top:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" valign="middle">

<table>こんなタグもあります。jQuery を使用すると、すべての色を から#378DE5に変更でき#5CB811ますか? 私はすでにいくつかのjQueryを動作させています...

    $(document).ready(function () {
    var last = $('tbody tr:hidden').length;
    if (last > 0) {
        $("#nextStep").click(function () {
            var x = $("tbody tr:hidden:first");

            console.log(x);
            console.log(last);
            $("tbody tr:hidden:first").show();
            last = $('tbody tr:hidden').length;
            if (last == 0) { 
                $("#nextStep").html('DONE!');
                $("#nextStep").addClass("finished_show_next_button");
                //I want to add the changing of the table/cell borders here.
            }
        });
    }
});

上記のコメント領域で、str_replacePHP のようなことを行うことは可能ですか? Javascript/jQuery がドキュメントをスキャンし、 のすべてのインスタンスを に変更する場所#378DE5は#5CB811?

サンプルテーブルはこちら...

            <table id="problem_area" width="100%">
            <tbody>
                <tr id="problem_header">
                    <td id="problem_title" style="border-right:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" width="50%" align="center"><span style="font-size: 18px; font-weight:bold; color: #545454;"><?php echo 'Unit ' . $row['unit'] . ', Lesson ' . $row['lesson'] . ': ' . $row['title']; ?></span></td>
                    <td id="notes_title" style="border-left:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" width="50%" align="center"><span style="font-size: 18px; font-weight:bold; color: #545454;">Notes</span></td>
                </tr>
                <tr id="border_row">
                    <td id="border_cell" style="border:solid 2px #378DE5;"></td>
                    <td id="border_cell" style="border:solid 2px #378DE5;"></td>
                </tr>

                <tr class="problem_display_row">
                    <td id="problem_display" style="border-right:solid 2px #378DE5; border-top:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" valign="middle">
stuff                       </td>
                    <td id="notes_display" style="border-top:solid 2px #378DE5; border-left:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" valign="middle">
more stuff                      </td>
                </tr>

                <tr class="problem_display_work">
                    <td id="problem_display" style="border-right:solid 2px #378DE5; border-top:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" valign="middle">
stuff again                     </td>
                    <td id="notes_display" style="border-top:solid 2px #378DE5; border-left:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" valign="middle">
more stuff again                        </td>
                </tr>
                <tr class="problem_display_work">
                    <td id="problem_display" style="border-right:solid 2px #378DE5; border-top:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" valign="middle">
still more stuff                        </td>
                    <td id="notes_display" style="border-top:solid 2px #378DE5; border-left:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" valign="middle">
still more stuff again                      </td>
                </tr>

            <tbody>
            <tfoot>

                <tr>
                    <td class="show_next_button" id="nextStep" colspan="2">Show Next</td>
                </tr>
            </tfoot>

        </table>
4

4 に答える 4

1

次のように、クラスは簡単に役立ちます。すべての td、tr 、テーブルに「style-border-color」と言う共通のクラスを与えます。

<td id="problem_title" class="style-border-color" ><?php echo 'Unit ' . $row['unit'] . ', Lesson ' . $row['lesson'] . ': ' . $row['title']; ?></span></td>

CSSに、インラインで記述したCSSコードを追加します

.style-border-color
{
style="border-right:solid 2px #378DE5; border-bottom:solid 2px #378DE5; padding:10px;" width="50%" align="center"><span style="font-size: 18px; font-weight:bold; color: #545454;"
}

次に、jqueryで次を試してください

$(document).ready(function(e) {
   $(".style-border-color").css({"border-color":"your-desired-color"});
});
于 2013-07-07T12:20:36.607 に答える
1

わかりました、あなたのコメントによるとI want the color change when the last iteration is reached . スタイルチェンジのやり方はこちら。これを試して？

デモhttp://jsfiddle.net/yeyene/kqB6L/

$(document).ready(function () {
        var last = $('tbody tr:hidden').length;
        if (last > 0) {
        $("#nextStep").click(function () {
            var x = $("tbody tr:hidden:first");

            console.log(x);
            console.log(last);
            $("tbody tr:hidden:first").show();
            last = $('tbody tr:hidden').length;
            if (last == 0) { 
                $("#nextStep").html('DONE!');
                $("#nextStep").addClass("finished_show_next_button");
                //I want to add the changing of the table/cell borders here.
                $("tbody td").each(function(){
                    if($(this).css('border-right')=='2px solid rgb(55, 141, 229)'){
                        $(this).css({'border-right':'2px solid #5CB811'});
                    }
                    if($(this).css('border-top')=='2px solid rgb(55, 141, 229)'){
                        $(this).css({'border-top':'2px solid #5CB811'});
                    }
                    if($(this).css('border-bottom')=='2px solid rgb(55, 141, 229)'){
                        $(this).css({'border-bottom':'2px solid #5CB811'});
                    }
                });
            }
        });
    }
});
于 2013-07-07T06:46:06.360 に答える
0

このコードを試して、カラーコードを置き換えてください。これを好きなところに置いてください。

var styleStr = $("tbody td[style]").getAttribute("style").replace(/#378DE5/g,"#5CB811");

$("tbody td[style]").setAttribute("style",styleStr);
于 2013-07-07T07:53:05.697 に答える
0

あなたはcssクラスを扱っていませんか？

#378DE5色を使用するクラスと に別のクラスを割り当てることができます#5CB811。次に、jQuery を使用してすべてのテーブルを繰り返し処理し、クラスを更新します。

于 2013-07-07T06:43:57.597 に答える