Alterner bakgrunnsfarge i tabell med jQuery

Med noen ytterst få linjer kan man få alternerende farger på rader i en tabell. Det eneste man trenger er en tabell med en klasse som inneholder mer enn en rad (ellers vil det være meningsløst i de fleste tilfeller med alterende farger), inkludering av jquery, og en liten kodesnutt. La oss se på tabellen først:

  1. <table class="alternerende">
  2. <tbody>
  3. <tr>
  4. <td>Rad 1, celle 1</td> <td>Rad 1, celle 2</td>
  5. </tr>
  6. <tr>
  7. <td>Rad 2, celle 1</td> <td>Rad 2, celle 2</td>
  8. </tr>
  9. <tr>
  10. <td>Rad 3, celle 1</td> <td>Rad 3, celle 2</td>
  11. </tr>
  12. </tbody>
  13. </table>

Deretter må vi inkludere jQuery. Dette gjøres i <head>-tagen. (Last ned jQuery først om det trengs da):

  1. <script src="js/jquery.js" type="text/javascript"></script>

Så kommer vi til det store øyeblikket, skrive javascriptet.

  1. $(document).ready(function () {
  2. $("table tr:even").addClass("even");
  3. $("table tr:odd").addClass("odd");
  4. });

Thats it. Se demo her.

Send ny kommentar

Innholdet i dette feltet blir holdt privat og vil ikke bli vist offentlig.
  • Internett adresser og e-postadresser konverteres til lenker automatisk
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Automatisk linjeskift

Mer informasjon om formateringsvalgene