Heim > Artikel > Web-Frontend > So ändern Sie den Tabellenstil mit Javascript

So ändern Sie den Tabellenstil mit Javascript

王林Original: 2023-05-21 09:37:071397Durchsuche

JavaScript ist eine Skriptsprache, die zum Hinzufügen von Interaktivität und dynamischen Effekten zu Webseiten verwendet wird. In der Webentwicklung gehören Tabellen zu den am häufigsten verwendeten Elementen. Mithilfe von JavaScript können Sie den Stil einer Tabelle einfach ändern, um sie schöner und leichter lesbar zu machen.

1. Stile zur Tabelle hinzufügen

Bevor wir mit der Änderung des Tabellenstils beginnen, müssen wir der Tabelle Stile hinzufügen. Wir verwenden CSS, um Stile für die Tabelle zu definieren, und verwenden dann JavaScript, um diese Stile zu ändern. Das folgende Beispiel zeigt, wie man eine Tabelle formatiert:

<!DOCTYPE html>
<html>
    <head>
        <style>
            table {
                border-collapse: collapse;
                width: 100%;
            }

            th, td {
                text-align: left;
                padding: 8px;
                border-bottom: 1px solid #ddd;
            }

            tr:nth-child(even) {
                background-color: #f2f2f2;
            }
        </style>
    </head>
    <body>

        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>25</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>32</td>
                <td>女</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>18</td>
                <td>男</td>
            </tr>
        </table>

    </body>
</html>

Im obigen Beispiel haben wir den folgenden Stil definiert:

border-collapse: Collapse ; stellt den Rand verbundener Zellen dar. border-collapse: collapse; 表示合并单元格的边框。
width: 100%; 表示表格占用父容器的100%宽度。
th, td 表示表头与表数据的样式
text-align: left; 表示数据左对齐。
padding: 8px; 表示数据与边框的间距为8像素。
border-bottom: 1px solid #ddd; 表示每行数据底部的边框厚度为1像素，颜色为浅灰色。
tr:nth-child(even)

width: 100 %;

th, td stellt den Stil des Tabellenkopfes und der Tabellendaten dar.

text-align: left; stellt den dar Daten links Ausrichtung.

padding: 8px;

border-bottom: 1px solid #ddd; Gibt an, dass die Rahmenstärke am unteren Rand jeder Datenzeile 1 Pixel beträgt und die Farbe hellgrau ist.

tr:nth-child(even) bedeutet, dass die Hintergrundfarbe jede zweite Zeile geändert wird.

2. Verwenden Sie JavaScript, um den Tabellenstil zu ändern.

Da wir nun die Stile für die Tabelle definiert haben, besteht der nächste Schritt darin, diese mithilfe von JavaScript zu ändern Stile. Hier sind einige Beispiele, die zeigen, wie Sie mit JavaScript den Stil einer Tabelle ändern:

```
document.getElementsByTagName("table")[0].style.backgroundColor = "#f9f9f9";
```
#🎜🎜 #In diesem Beispiel wird die Hintergrundfarbe einer Tabelle in Hellgrau geändert.

Hintergrundfarbe der Kopfzeile ändern:

var th = document.getElementsByTagName("th");
for (var i = 0; i < th.length; i++) {
    th[i].style.backgroundColor = "#ddd";
}

Ändern Sie die Schriftgröße aller Zellen in der Tabelle:

var td = document.getElementsByTagName("td");
for (var i = 0; i < td.length; i++) {
    td[i].style.fontSize = "16px";
}

Ändern Sie die Schriftfarbe aller geraden Zeilen in der Tabelle:

var tr = document.getElementsByTagName("tr");
for (var i = 1; i < tr.length; i += 2) {
    var td = tr[i].getElementsByTagName("td");
    for (var j = 0; j < td.length; j++) {
        td[j].style.color = "#999";
    }
}

Ändern Sie den Rahmenstil der Zellen in der ersten Spalte der Tabelle:

var td = document.getElementsByTagName("td");
for (var i = 0; i < td.length; i += 3) {
    td[i].style.borderRight = "1px solid #ddd";
}

Dieses Beispiel ändert den rechten Rand der Zellen in Die erste Spalte der Tabelle wird in einen 1 Pixel großen hellgrauen Rand umgewandelt.

#🎜🎜##🎜🎜#Letzte Spalte in der Tabelle ausblenden: #🎜🎜##🎜🎜#

var table = document.getElementsByTagName("table")[0];
var td = table.getElementsByTagName("td");
for (var i = td.length - 1; i >= 0; i--) {
    if ((i + 1) % 3 === 0) {
        td[i].parentNode.removeChild(td[i]);
    }
}

#🎜🎜#Dieses Beispiel löscht die letzte Zellenspalte in der Tabelle. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel haben wir gelernt, wie man den Tabellenstil mit JavaScript ändert. Mithilfe dieser Techniken können Sie auf einfache Weise verschönerte Tabellen erstellen und ändern. Je nach Bedarf können Sie JavaScript verwenden, um der Tabelle dynamische Effekte und Interaktivität hinzuzufügen. Nachdem Sie nun gelernt haben, wie Sie Tabellenstile ändern, versuchen Sie, Ihre Tabellen mit JavaScript zu verschönern! #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Tabellenstil mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css padding border td tr th

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：DreamWeaver-CSS-ÄnderungNächster Artikel：DreamWeaver-CSS-Änderung

In Verbindung stehende Artikel

Mehr sehen