Javascript: Tabelle einfärben

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Javascript: Tabelle einfärben

    Hallo,

    da es heute sa* kalt ist hab ich mir gedacht, lernst ein wenig javascript.
    Allerdings habe ich ein Problem, ich möchte einzelne Zellen einer Tabelle einfärben.

    Hier mein Code:

    Quellcode

    1. <script type="text/javascript">
    3. document.getElementById('zelle1').style.backgroundColor= '#FF0000';
    5. </script>
    7. <table border="1" width="50%">
    8. <tr>
    9. <td id="zelle1" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    10. <td id="zelle2" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    11. </tr>
    12. <tr>
    13. <td id="zelle3" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    14. <td id="zelle4" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    15. </tr>
    16. </table>
    Alles anzeigen


    Leider klappt es nicht...


    Gruß
    Andreas

  • Wenn ich getElementById in eine Funktion bastle, klappt es.
    Könnt ihr mir erklären, warum das nur über eine Funktion klappt???


    Quellcode

    1. <script type="text/javascript">
    3. function bgcolor () {
    4. document.getElementById('zelle1').style.backgroundColor = "FF0000";
    5. }
    7. </script>
    9. <table border="1" width="50%">
    10. <tr>
    11. <td id="zelle1" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    12. <td id="zelle2" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    13. </tr>
    14. <tr>
    15. <td id="zelle3" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    16. <td id="zelle4" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    17. </tr>
    18. </table>
    19. <input type="button" value ="OK" onclick="bgcolor()">
    Alles anzeigen


    Danke !

  • Weil dein Script vom Browser eingelesen wird, jedoch nicht weiterverarbeitet wird, da das Element "zelle1" noch gar nicht existiert.

    Die Tabelle/Zelle wird ja erst später vom Browser eingelesen.

    Wenn du dein Script nach der Tabelle packst klappts

    Quellcode

    1. <table border="1" width="50%">
    2. <tr>
    3. <td id="zelle1" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    4. <td id="zelle2" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    5. </tr>
    6. <tr>
    7. <td id="zelle3" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    8. <td id="zelle4" width="50%" bgcolor="#FFFFFF">&nbsp;</td>
    9. </tr>
    10. </table>
    12. <script type="text/javascript">
    13. document.getElementById('zelle1').style.backgroundColor= '#FF0000';
    14. </script>
    Alles anzeigen


    Auch der Browser liest das Buch von Oben nach unten :D