JavaScript Textänderung in Tabelle + Hintergrundgrafik einfügen

[djjlx]

Guten Morgen zusammen!

Nach ein paar Tagen ohne Erfolg würde ich wieder mal etwas Hilfe benötigen

Ich bekomme per JS die aktuelle (Sport)Tabelle in die Seite integriert.
Dabei kommt folgender HTML Code raus.

<table class="mbt-table" cellpadding="0" cellspacing="0" width="100%">
 <tbody>
 <tr class="mbt-subheader">
  <td colspan="4">ABL-H1</td>
 </tr>
 <tr>
  <th class="first" width="10">Nr.</th>
  <th class="team_name">Team</th>
  <th>W/L</th>
  <th>Punkte</th>
 </tr>
....
 <tr class="mbt-subheader">
  <td colspan="4">ABL-H2</td>
 </tr>....
</table>

Jetzt müsste nachträglich das Aussehen der Subheader verändern.
Optimal wäre in die Zelle eine hintergrundgrafik und den Text ABL-H1 bzw. ABL-H2 löschen.

Da kommt nun mein Problem da es auch zwei verschiedene Hintergrundgrafiken geben würde einmal wo ABL-Hauptrunde 1 und einmal wo ABL-Hauptrunde 2 in einer Corporate Design Schriftart drauf steht.

Meine Versuche bisher waren leider nicht erfolgreich

Mein Gedankengang:
mit getElementsByClassName und suche nach dieser Zeile suchen <td colspan="4">ABL-H1</td>
danach mit <td colspan="4" id="header_h1"></td>ersetzen. Das selbe auch mit der ABL-H2 überschrift

In Css für #header_h1 und #header_h2 die Grafiken vorab bereits festgelegt.

Hat jemand eine Idee wie man das machen könnte?

Gruss
djjlx

 

[Aradiv]

in JQuery würde das so gehen.

$(".mbt-table td").css("background-image", "url('/images/background.jpg');");

ohne musst du dir halt was bauen mit getElementsByClassName und childNodes.

 

[tleilax]

Das könnte theoretisch auch komplett über eigenes CSS gehen:

 // Alle bzw. oberer Header (unterer Header wird durch die folgende Regel 
.mbt-table .mbt-subheader td {
  // Text ausblenden, siehe https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;

  // Hintergrundbild
  background: url(https://example.com/foo.png);
}
 // Oberer Header
.mbt-table .mbt-subheader:first-child td {
  background: url(https://example.com/bar.png);
}

Eventuell muss man da mit den Größen noch etwas rumspielen und hoffentlich klappt das alles so auf Tabellenzellen. Die sind ja manchmal etwas sperrig im Umgang.