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

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

在上面的注释区域中，是否可以像PHP那样执行某种

str\u 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>

笔记
东西
更多的东西
再来一次
再来点东西
还有更多的东西
还有更多的东西
下一个节目

您不是在使用css类吗

---

您可以为

#378DE5

颜色指定一个类，为

#5CB811

指定另一个类。然后，使用jQuery遍历所有表并更新类

好的，根据您的评论

我希望在达到最后一次迭代时更改颜色

. 下面是如何改变风格。试试这个

演示

---

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

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

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

---

类可以很容易地帮助您，如下所示 给所有的td、tr、表格指定一个公共类，并说“样式边框颜色”

---

为什么是内联CSS？如果你可以修改HTML，我会先删除所有这些样式，然后创建一个单独的样式表。为什么要使用jQuery？是你的HTML吗？如果是这样的话，您应该能够编辑它并将样式添加到所需的元素中，这是一种比在文档完成后使用jQuery更轻松的方法rendered@carl-洛佩兹：我已经有了上面的javascript/jQuery做的东西。我希望在达到最后一次迭代（即last==0）时更改颜色。看看这个：我可以按类组织所有内容。如果需要，我会这么做。我喜欢你的想法，但我不知道如何实施。你的解决方案是我需要的95%！我遇到的唯一问题是，如果一个单元格只有右边框和上边框，那么代码就是在下边框中添加。你有办法不在当前没有边框的地方添加边框吗？你能发布你的部分表格html代码吗，这样我就可以检查和解决。我试图实现你的解决方案，但由于某种原因它不起作用。不过，我对它投了赞成票，因为它显然在JSFIDLE上有效。

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

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

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

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

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

$(document).ready(function(e) {
   $(".style-border-color").css({"border-color":"your-desired-color"});
});