Alternating Table Row Farbe Robust zum Anzeigen: keine Einstellungen

Question

Ich habe eine dynamische Tabelle, die ich mit Javascript erstellt habe. Abhängig von verschiedenen Benutzerereignissen werden einige Zeilen ausgeblendet, neu angeordnet, usw. Um genauer zu sein, verwende ich display:none;, um dies zu tun. Das Problem ist, dass die Zeilen immer ihre ursprüngliche Hintergrundfarbe behalten (stellen Sie sich vor, wenn alle Zeilen sichtbar wären, dann könnten Sie die alternierenden Farben sehen). Das wäre in Ordnung, wenn ich die gesamte Tabelle sichtbar hätte, aber wie ich bereits erwähnte, werden manchmal bestimmte Zeilen versteckt oder erscheinen an verschiedenen Positionen. Dies führt oft dazu, dass zwei oder mehr Reihen derselben Farbe übereinander gestapelt werden.

Es gibt einen ähnlichen Beitrag:

Alternate table row color even if row is removed

Ich habe versucht, so viele diese Lösungen, wie ich kann. Mein Problem besteht jedoch weiterhin. Wahrscheinlich wegen der folgenden Gründe:

• Ich bin nicht die Spalten zu entfernen, habe die Einrichtung ich einfach display:none;
• Ich bin nicht in einer jquery Umgebung arbeiten, so dass ich darauf beschränkt nativer JavaScript Lösungen

Mein Code ist:

tr:nth-child(even) { 
    background:gray; 
} 
tr:nth-child(odd) { 
    background:lightgray; 
} 

ich versucht habe tr:nth-of-type(odd) und viele ähnliche Varianten. Gibt es noch etwas in CSS oder nativem JavaScript, das ich ausprobieren kann?

Mehr auf visbility/Auswahl:

CSS:

tr:not(.selected) { 
    display: none; 
} 

JS:

my_circles.each(function(d,i) { 
    if (my_bool===true) { 
     d3.select(this).classed('selected',true); 
     tableRows.get(this).classed("selected", true); 
    } 
}); 

Ich verwende d3.js, aber ich denke, ich werde das d3-Tag weglassen, weil das eher ein CSS- oder JS-Problem ist. Dies ist ein kleines Snippet, hauptsächlich für den Kontext, aber im Wesentlichen sollten wir in der Lage sein zu folgern, dass die Sichtbarkeit durch eine Klassenzuweisung umgeschaltet wird. Wenn Sie neugierig sind, ist es immer dann, wenn der Benutzer einen Kreis auf meinem angrenzenden Streudiagramm auswählt.

Answer 1

Leider gibt es keine einfache CSS-Lösung für dieses Problem. Vor allem, weil der :not Selektor nicht zusammen mit nth-... Selektoren geht.

Ihre beste Wette wäre, Ihre Zeilen jederzeit per Javascript neu zu stripen.

Streichen Sie Ihre Zeilen, sobald Ihre Seite geladen ist. Wenn Sie danach in einer beliebigen Zeile display ändern, wird die Stripe-Funktion erneut ausgelöst.

Hier ist ein grobes Beispiel:

var tab = document.getElementById("tab"), 
 
    btns = tab.getElementsByTagName("a"), 
 
    show = document.getElementById("show"), 
 
    rows 
 
; 
 

 
stripe(); // Stripe the rows in beginning 
 

 
// The stripe function itself 
 
function stripe() { 
 
    // select all rows which are not hidden 
 
    rows = tab.querySelectorAll('tr:not(.hidden)'); 
 

 
    // add a class for every second such row 
 
    for(var x = 0; x < rows.length; x++) { 
 
    if (x % 2 == 0) { rows[x].classList.add('alt'); } 
 
    else { rows[x].classList.remove('alt'); } 
 
    } 
 
} 
 

 
// dummy buttons to hide each row in this demo 
 
[].forEach.call(btns, function(elem) { 
 
    elem.addEventListener('click', hide); 
 
}); 
 

 
// your actual code where you hide your rows 
 
function hide(e) { 
 
    e.target.parentNode.parentNode.classList.add('hidden'); 
 
    stripe(); // fire re-striping when hiding rows 
 
} 
 

 
// dummy button to show rows in this demo 
 
show.addEventListener('click', function(e) { 
 
    rows = tab.querySelectorAll('tr.hidden'); 
 
    [].forEach.call(rows, function(row) { 
 
    row.classList.remove('hidden'); 
 
    }); 
 
    stripe(); // fire re-striping when showing rows 
 
});

table { width: 70%; border: 1px solid gray; border-collapse: collapse; } 
 
td { border: 1px solid gray; padding: 4px; } 
 
tr.hidden { display: none; } 
 
#tab tr.alt { background-color: #ddd;}

<table id="tab"><tbody> 
 
    <tr><td>Row 1</td><td><a href="#">Hide</a></td></tr> 
 
    <tr><td>Row 2</td><td><a href="#">Hide</a></td></tr> 
 
    <tr><td>Row 3</td><td><a href="#">Hide</a></td></tr> 
 
    <tr><td>Row 4</td><td><a href="#">Hide</a></td></tr> 
 
    <tr><td>Row 5</td><td><a href="#">Hide</a></td></tr> 
 
</tbody></table><br /> 
 
<a id="show" href="#">Show All</a>

Begleitende Geige: https://jsfiddle.net/abhitalks/dz5aq5fk/

.

Answer 2

Es ist keine CSS oder native JS-Lösung, aber hier ist eine D3-basierte Lösung. Sie können die Klassen der Zeilen jedes Mal ändern, wenn sich die Zeilen in Ihrer Tabelle ändern.

d3.selectAll("tr.selected").classed("grey",function(d,i){return i%2 == 0}); 

Es fügt die grey Klasse zu jeder zweiten Reihe und entfernt sie aus dem ganzen Rest. Dann können Sie Zeilen mit CSS ausmalen.

tr.grey { 
    background:gray; 
} 
tr:not(.grey) { 
    background:lightgray; 
} 

Hier ist eine jsbin, die diese Strategie in Aktion zeigt.

Answer 3

Dies ist keine perfekte Lösung, aber Sie können Gradientenhintergrund in der Tabelle verwenden, um das gewünschte Ergebnis zu erhalten.

unten ist Beispiel mit Gradienten Hintergrund in der Tabelle.

tr:not(.selected) { 
 
    display: none; 
 
} 
 

 
table { 
 
    background-color: gray; 
 
    background-image: linear-gradient(transparent 50%, lightgray 50%); 
 
    background-size: 100% 36px; 
 
}

<table width="500" cellpadding="0" cellspacing="0"> 
 
    <tr class="selected"> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    </tr> 
 
    <tr class="selected"> 
 
    <td>C</td> 
 
    <td>D</td> 
 
    </tr> 
 
    <tr> 
 
    <td>E</td> 
 
    <td>F</td> 
 
    </tr> 
 
    <tr class="selected"> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    </tr> 
 
    <tr> 
 
    <td>I</td> 
 
    <td>J</td> 
 
    </tr> 
 
     <tr> 
 
    <td>E</td> 
 
    <td>F</td> 
 
    </tr> 
 
    <tr class="selected"> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    </tr> 
 
    <tr class="selected"> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    </tr> 
 
    <tr class="selected"> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    </tr> 
 
    <tr> 
 
    <td>I</td> 
 
    <td>J</td> 
 
    </tr> 
 
    
 
</table>

Answer 4

Wie Sie der Grund, zu Recht darauf hingewiesen, dass die CSS-Wechsel Streifen nicht arbeiten, ist, dass Ihre Zeilen an Ort und Stelle verbleiben, und display:none mit nur versteckt.

Der Trick besteht darin, die sichtbaren und versteckten Zeilen zusammen zu gruppieren, so dass wir nicht mit Un-Event-Striping enden. Da die Reihenfolge Ihrer Zeilen nicht wichtig ist, können Sie die ausgeblendeten Zeilen entweder nach oben (unter Verwendung von .insertBefore) oder nach unten (unter Verwendung von .appendChild) des übergeordneten Elements verschieben. Ähnliches:

my_circles.each(function(d,i) { 
    if (my_bool===true) { 
     d3.select(this).classed('selected',true); 
     var row = tableRows.get(this); 
     row.parentNode.appendChild(row); 
     row.classed("selected", true); 
    } 
});