• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vereinzelt Zeilen (nicht zyklisch) in Tabelle, die grundsätzlich via CSS gestaltet ist ändern?

J

jw1900

Neues Mitglied
Hallo,

ich bin dank einiger Hinweise hier und dann doch viel try & error nun zu einem - hoffentlich - brauchbaren Ansatz für das Erzeugen von "ergebnistabellen" in meinem (open-source) Projekt gekommen (Beispiel siehe unten).

Dabei arbeite ich mit CSS, definiere grundlegende, gemeinsame Elemente (Rahmenstärke, Schriftart) von verschiedenen Tabellen durch einen allgemeinen Selektor ( xsl_T_type1..x ) und die spezielle Ausprägung dann durch ID's (##xsl_T_log/err/wrn/lap ).

Nun würde ich gerne bei MANCHEN Tabellen EINZELNE Zeilen, abhängig vom Inhalt, farblich mit anderer Schrift oder sonstiger Eigenschaft kennzeichnen.

Frage(n):
1.) Wie mache ich das am elegantesten, mit möglichst wenig Code direkt INLINE?
2.) Wie wäre die entsprechende CSS-Variante?

Mit <span> zu arbeiten, habe ich ja gelernt, ist "verpönt" ... <style> wäre dann probat? oder ... <individueller_tag>?

Hier mein derzeitiger Code:

Code: 
<!DOCTYPE html>
<html>
<!--
    PROJECT xSLOLx: BASIC HTML HEADER
    FROM FILE=={{xSLOlxDIR)/HTML/_TEST_HTML.HDR.html
-->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=windows-1252">
        <meta name="author" content="xSLOLx//JW">
        <meta name="description" content="{{###TBD:HEAD_DESCRIPTION)">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
           
        <title>FROM TEST-HTML-HEADER-FILE</title>

        <style type="text/css" media="screen">

            xsl_T_type1{
                    /* border-collapse: collapse; */
                    /*border: 2px solid #006600;*/
                    /*border-bottom: 1px solid #000000;*/
                    /*background-color: #99ff99; #00e600 */
                    color: #000000;
                    font-family: "Andale Mono", "Lucida Console", "Courier New", monospace;
                    font-size: 14px;
                    text-align: left;
                    vertical-align: top;
            }
               
            /* =============================== LOGGING TABLE */
            #xsl_T_log {
                    width: 90%;
                    border: 2px solid #002966; /* very dark blue */
                    background-color: #80b3ff; /* light blue */
                    /*color: #000000;*/
                    padding: 5px;
                }
            #xsl_T_log tr:nth-child(even) {background-color: #cce0ff; } /* very light blue */
               
            /* =============================== ERROR TABLE */
            #xsl_T_err {
                    width: 90%;
                    border: 2px solid #660000; /* very dark red */
                    border: 2px solid #ff0000; /* intensive red */
                    background-color: #ffcccc; /* very light red */
                    /*color: #000000; */
                    padding: 5px;
                }
            #xsl_T_err tr:nth-child(even) {background-color: #ff9999; } /* light red */
               
            /* =============================== WARN TABLE */
            #xsl_T_wrn {
                    width: 90%;
                    border: 2px solid #004d00; /* very dark green */
                    background-color: #80ff80; /* light green */
                    color: #000000;
                    padding: 5px;
                }
            #xsl_T_wrn tr:nth-child(even) {background-color: #ccffcc; } /* very light green */

            /* =============================== LAPTIMES TABLE */
            #xsl_T_lap {
                    width: 90%;
                    border: 2px solid #739900; /* dark yell-green */
                    background-color: #ecffb3; /* very light yell-green */
                    /*color: #000000;*/
                    padding: 5px;
                }
            #xsl_T_lap tr:nth-child(even) {background-color: #d9ff66; } /* light yell-green */
               
        </style>
    </head>
    <body>
        <br>      
        <xsl_T_type1><div align="center"><table id="xsl_T_wrn">
            <tr>
                <td><b><u>User Warning:</u> @2:<i>unknown something ... table-id=xsl_T_wrn for WARNINGS</i></b> @@D:\IPS\web\dev.php<br></td>
                <td>hinten 1</td>
            </tr>
            <tr>
                <td><u>backtrace:</u><br></td>
                <td></td>
            </tr>
            <tr>
                <td>[0] in function <i><b><u>trigger_error</u></b></i> at line <b>2</b> in D:\IPS\web\__dev.php<br></td>
                <td></td>
            </tr>
            <tr>
                <td>[xSLOLxNS Errorhandler Version xns.001.01]<br></td>
                <td>hinten X</td>
            </tr>
        </table></div></xsl_T_type1>
           
        <xsl_T_type1><div align="center"><table id="xsl_T_err">
            <tr>
                <td><b><u>User Error</u> @452:<i>bad ID ...  table-id=twarn WARNING</i></b> @@D:\IPS\web\getsomething.php<br></td>
                <td>sdjhgkjshd j</td>
            </tr>
            <tr>
                <td><u>backtrace:</u><br>
                </td><td></td>
            </tr>
            <tr><td>[0] in function <i><b><u>trigger_error</u></b></i> at line <b>2</b> in D:\IPS\web\__dev.php<br></td></tr>
            <tr>
                <td>[xSLOLxNS Errorhandler Version xns.001.01]<br></td>
                <td>askljdkljahds </td>
            </tr>
        </table></div></xsl_T_type1>
           
        <xsl_T_type1><div align="center"><table id="xsl_T_log">
            <tr><td><b><u>Log output</u></b> <i>table-id=xsl_T_Log for LOGGING</i><b> @@D:\IPS\web\log.cls.php</b><br>irgendwas wird da ausgegeben</td><td>Log R1S2</b></td></tr>
            <tr><td>[0125] called XYZ <i><b><u>triggered</u></b></i> @<b>236</b> in D:\IPS\web\__sub01.inc.php<br></td></tr>
            <tr><td>[0131] called abc::fff()<i><b><u>by ccc:ddd</u></b></i> at line <b>2751</b> in D:\IPS\web\__m2m_RPi_rpi.inc.php<br></td></tr>
            <tr><td>[0214] ERROR OCCURRED - SEE ERROR LOG ... DISES ZEILE SOLLTE MIT ROTER SCHRIFT SEIN ... ABER WIE?<i><br></td></tr>
            <tr><td>[0125] called XYZ <i><b><u>triggered by</u></b></i> at line <b>2</b> in D:\IPS\web\sub01.inc.php<br></td><td>Log R5S2 </td></tr>
            <tr><td>[xSLOLxNS Log::show:all ver=xns.004.41b]<br></td><td>Log R6S2 </td></tr>
        </table></div></xsl_T_type1>
           
        <xsl_T_type1><div align="center"><table id="xsl_T_lap">
            <tr><td><b><u>LAPS output</u></b> <i>table-id=xsl_T_lap for LAP TIMES</i><b> @@D:\IPS\web\lap.cls.php</b></td><td>Lap R1S2</b></td></tr>
            <tr><td>[010.125] irgendwas</td></tr>
            <tr><td>[011.002] nochwas</td></tr>
            <tr><td>[011.004] irgendwas<i><br></td></tr>
            <tr><td>[012.445] ended with new record time<i><b><u>triggered by</u></b></i> at line <b>2</b> in D:\IPS\web\sub01.inc.php<br></td></tr>
            <tr><td>[xSLOLxNS Log::showlap:kernel ver=xns.002.38]<br></td><td>Lap R6S2 </td></tr>
        </table></div></xsl_T_type1>
    </body>
</html>
 
Ich weiß Denkanstöße sind fertigen Lösungen vorzuziehen, aber ich bin so stolz auf meine Lösung. :)
*in ein Array alle Tabellenzellen packen
*suchen ob ein bestimtes schlüsselwort vorkommt. (hier: ERROR)
* ZellenStyle ändern.


Javascript: 
<script>
window.onload = function () {
    myFunction()
}

function myFunction() {
var cells = new Array(document.getElementsByTagName('td'));
    for (var i = 0; i < cells[0].length; i++) {
        pos = cells[0][i].innerHTML.search(/ERROR/);
        if (pos != -1){
            cells[0][i].style.color="red";
        }

   }
}
</script>
 
...Es ist aber unnötig, da es nur die Nodelist wrapped und nicht die Nodelist in ein Array transformiert.
Außerdem wird mit diesem Ansatz nur eine Zelle gefärbt und nicht die Zeile um die es geht.

@jw1900
Ich würde das so machen:
1. Alle Rows holden.
2. Alle rows durchgehen und checken, ob in der aktuellen Row eine Zelle das gesuchte Wort enthält.
3. Wenn das so ist, der Row eine bestimmte CSS-Klasse geben.

Ich arbeite in diesen Fällen immer lieber mit einer CSS Klasse, da eine Klasse viel flexibler als inline Styles sind.
Sie können mehrere Styles kapseln und man muss nicht in den JS-Code gehen, wenn man den Style anpassen möchte.
Außerdem kann man mit Klassen auch zusätzlich auf Kind Elemente zugreifen oder Pseudo Elemente hinzufügen.

@ThomasF
Tip: Versuche so oft wie möglich den Array-Constructor zu vermeiden. Er wird fast nie benötigt und es gibt viel bessere Methoden Arrays zu erstellen oder Listen in Arrays zu verwandeln.
Außerdem kann die Dualität des Constructors
Javascript: 
new Array(2)   // -> [empty, empty] (length = 2)
new Array(1,2) // -> [1,2] (length = 2)
zu Problemen führen.
 
Also ohne array-construktor.
Ich dachte man muss bekannt machen, dass die Var ein Array ist.

Javascript: 
window.addEventListener('load', function() {
        let cells = document.getElementsByTagName("tr");
        for (var i = 0; i < cells.length; i++) {
            pos = cells[i].innerHTML.search(/ERROR/);
            if (pos != -1){
                cells[i].className = "highlightcell";
            }
       }
    })

AndreasB schrieb:
Ich würde das so machen:
1. Alle Rows holden.
2. Alle rows durchgehen und checken, ob in der aktuellen Row eine Zelle das gesuchte Wort enthält.
3. Wenn das so ist, der Row eine bestimmte CSS-Klasse geben.
Zum Vergrößern anklicken....
Eigentlich hab ich genau das gemacht.
Gut ich hab Zellen statt Zeilen durchsucht (die zweite zelle der zeile ist sowiso leer) und Styles zugefügt statt Klassen. NaJa. Ich glaube nicht, dass Kind- und Pseudo-Elemente für diese Tabelle jemals relevant werden.
Der OP kann das ja anpassen oder lassen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben