Ä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/...
Du musst angemeldet sein, um einen Kommentar abzugeben.
Klasse kann Ihnen helfen, einfach wie folgt vor
geben Sie eine Allgemeine Klasse für alle td, tr ,table-sagen "-Stil-border-color"..
in Ihrem css, fügen Sie css-code, den Sie geschrieben haben, inline -
dann in jquery versuchen Sie folgenden
Ok, nach deinem Kommentar
I want the color change when the last iteration is reached
. Hier ist, wie um Stil zu ändern. Versuchen Sie, diese?
DEMO http://jsfiddle.net/yeyene/kqB6L/
Du dir nicht die Arbeit mit css-Klassen?
Könnten Sie weisen eine Klasse, die verwendet die
#378DE5
Farbe und ein anderes für die#5CB811
. Dann, mit jQuery Durchlaufen alle Tabellen und aktualisieren der Kurse!Versuchen, dieses Stück code ersetzen Sie den Farbcode. Platzieren diese wo Sie wollen.