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.
            }
        });
    }
});

在上面的评论区域中，是否有可能像 PHP 那样做一些事情str_replace？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

Class can help you easily as follows give a common class to all the td, tr ,table say "style-border-color"..

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

in your css, add you css code which you have written inline

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

then in jquery try following

$(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 回答