Question

我有几个内联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>

Answer 1

好的，根据您的评论I want the color change when the last iteration is reached 。这是如何改变风格。试试这个？

DEMO 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'});
                    }
                });
            }
        });
    }
});

Answer 2

Class可以轻松地帮助您，如下所示给所有td，tr，table一个公共类说“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"});
});

Answer 3

你不是在使用CSS课程吗？

您可以指定一个使用#378DE5颜色的类，另一个使用#5CB811颜色。然后，使用jQuery遍历所有表并更新类！

Answer 4

尝试使用此代码替换颜色代码。把它放在你想要的地方。

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

$("tbody td[style]").setAttribute("style",styleStr);

使用jQuery更改所有表格边框颜色

4 个答案: