Ändern Sie alle table border Farben mit jQuery

Habe ich mehrere Instanzen von inline-CSS wie folgt...

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

Gibt es auch <table> tags wie diese. Mit jQuery, können Sie alle Ihre Farben geändert werden #378DE5 zu #5CB811? Ich habe bereits einige jQuery arbeiten...

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

In den auskommentierten Bereich oben, ist es möglich, zu tun, irgendeine Art von str_replace wie PHP funktioniert? Wo Javascript/jQuery wird, Scannen Sie das Dokument, und ändern Sie alle Instanzen von #378DE5 zu #5CB811?

Eine Beispiel-Tabelle hier...

            <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>
  • Warum inline-CSS? Wenn Sie können, ändern Sie den HTML-ich würde anfangen, indem Sie alle diese Stile und erstellen Sie ein separates stylesheet.
  • Warum jQuery? Ist es dein HTML? Wenn das der Fall ist, sollten Sie in der Lage sein, um es zu Bearbeiten, und fügen Sie die styling Elemente, die Sie wollen, ein leichter Ansatz als die Verwendung von jQuery nach dem Dokument gemacht hat
  • Ich habe bereits die oben genannten javascript - /jQuery-Zeug. Ich möchte die Farbe ändern, wenn die Letzte iteration erreicht wird (d.h. Letzte == 0).
  • Werfen Sie einen Blick auf diese: stackoverflow.com/questions/1509316/...
InformationsquelleAutor gtilflm | 2013-07-07
Schreibe einen Kommentar