Ich habe eine Tabelle in ASPX erstellt. Ich möchte eine der Spalten basierend auf der Anforderung ausblenden, aber es gibt kein Attribut wie visiblebeim Erstellen von HTML-Tabellen. Wie kann ich mein Problem lösen?
Ich habe eine Tabelle in ASPX erstellt. Ich möchte eine der Spalten basierend auf der Anforderung ausblenden, aber es gibt kein Attribut wie visiblebeim Erstellen von HTML-Tabellen. Wie kann ich mein Problem lösen?
Antworten:
Zu diesem Zweck müssen Sie das Stylesheet verwenden.
<td style="display:none;">td:first-child { display:none; }
Mit dem nth-childCSS-Selektor können Sie eine ganze Spalte ausblenden:
#myTable tr > *:nth-child(2) {
display: none;
}Dies funktioniert unter der Annahme, dass eine Zelle der Spalte N (sei es ein thoder td) immer das N-te untergeordnete Element ihrer Zeile ist.
Wenn Sie möchten, dass die Spaltennummer dynamisch ist, können Sie dies mit einem querySelectorAllbeliebigen Framework tun, das ähnliche Funktionen bietet, wie jQueryhier:
$('#myTable tr > *:nth-child(2)').hide();(Die jQuery-Lösung funktioniert auch mit älteren Browsern, die dies nicht unterstützen.nth-child )
Sie können auch verwenden:
<td style="visibility:hidden;">
or
<td style="visibility:collapse;">Der Unterschied zwischen ihnen, dass "versteckt" die Zelle verbirgt, aber den Raum enthält, aber beim "Zusammenbruch" wird der Raum nicht wie eine Anzeige gehalten: keine. Dies ist wichtig, wenn eine ganze Spalte oder Zeile ausgeblendet wird.
visibility: collapsewurde speziell für das Ein- und Ausblenden von Zellen entwickelt, da bei der Neuberechnung der Zellenbreite / -höhe ein Unterschied zwischen dieser und dieser besteht display:none. Siehe developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
Die Antwort von Kos ist fast richtig, kann aber schädliche Nebenwirkungen haben. Das ist richtiger:
#myTable tr td:nth-child(1), #myTable th:nth-child(1) {
display: none;
}CSS (Cascading Style Sheets) kaskadiert Attribute für alle untergeordneten Elemente . Dies bedeutet, dass *:nth-child(1)das erste tdvon jedem tr UND das erste Element aller untergeordneten Elemente tdausgeblendet wird. Wenn einer von Ihnen tdSchaltflächen, Symbole, Eingaben oder Auswahlen hat, wird der erste ausgeblendet (woops!).
Auch wenn Sie derzeit keine versteckten Dinge haben, stellen Sie sich Ihre Frustration später vor, wenn Sie eine hinzufügen müssen. Bestrafe dein zukünftiges Selbst nicht so, das wird ein Problem beim Debuggen!
Meine Antwort wird verstecken nur die erste tdund thauf alle trin #myTableIhren anderen Elemente sicher zu halten.
Bootstrap-Benutzer verwenden .hiddenclass on <td>.
Sie können eine Spalte auch mit dem col-Element https://developer.mozilla.org/en/docs/Web/HTML/Element/col ausblenden
So verbergen Sie die zweite Spalte in einer Tabelle:
<table>
<col />
<col style="visibility:collapse"/>
<tr><td>visible</td><td>hidden</td></tr>
<tr><td>visible</td><td>hidden</td></tr>Bekannte Probleme: Dies funktioniert in Google Chrome nicht. Bitte stimmen Sie für den Fehler unter https://bugs.chromium.org/p/chromium/issues/detail?id=174167 ab
<style>
.hideFullColumn tr > .hidecol
{
display:none;
}
</style>Verwenden Sie .hideFullColumn in der Tabelle und .hidecol in th. Sie müssen die Klasse in td nicht einzeln hinzufügen, da dies ein Problem darstellt, da der Index möglicherweise nicht für jedes td berücksichtigt wird.
Sie können auch programmgesteuert tun, was vs dev vorschlägt, indem Sie den Stil mit Javascript zuweisen, indem Sie die Spalten durchlaufen und das td-Element auf einen bestimmten Index setzen, um diesen Stil zu erhalten.
<!doctype html>
<html lang="en">
<head>
<style id="myStyleSheet">
...
</style>
var column = 3;
var styleSheet = document.getElementById("myStyleSheet").sheet;
var rule = "table tr td:nth-child("+ column +"),table th:nth-child("+ column +")
{display: none}";
styleSheet.insertRule(rule);