Comment modifier le style du tableau avec javascript-Questions et réponses frontales-php.cn

Comment modifier le style du tableau avec javascript

王林

Libérer： 2023-05-21 09:37:07

original

1460 Les gens l'ont consulté

JavaScript est un langage de script utilisé pour ajouter de l'interactivité et des effets dynamiques aux pages Web. Dans le développement Web, les tableaux sont l’un des éléments couramment utilisés. En utilisant JavaScript, vous pouvez facilement modifier le style d’un tableau pour le rendre plus beau et plus facile à lire.

1. Ajouter des styles au tableau

Avant de commencer à modifier le style du tableau, nous devons ajouter des styles au tableau. Nous utilisons CSS pour définir les styles du tableau, puis utilisons JavaScript pour modifier ces styles. L'exemple suivant montre comment ajouter des styles à un tableau :

<!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>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons défini le style suivant :

border-collapse: collapse; Représente la bordure des cellules fusionnées. 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 représente le style de l'en-tête du tableau et des données du tableau

text-align: left; représente les données alignées à gauche.

padding : 8px;

border-bottom: 1px solid #ddd;

tr:nth-child(even) signifie changer la couleur d'arrière-plan toutes les deux lignes.

2. Utilisez JavaScript pour modifier les styles de tableau

Maintenant que nous avons défini les styles pour le tableau, l'étape suivante consiste à utiliser JavaScript pour modifier ces styles. Voici quelques exemples qui montrent comment modifier le style du tableau à l'aide de JavaScript :

document.getElementsByTagName("table")[0].style.backgroundColor = "#f9f9f9";

Copier après la connexion

Cet exemple change la couleur d'arrière-plan du tableau en gris clair.

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

Copier après la connexion

Cet exemple change la couleur d'arrière-plan de l'en-tête en gris clair.

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

Copier après la connexion

Cet exemple modifie la taille de police de toutes les cellules du tableau à 16 pixels.

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";
    }
}

Copier après la connexion

Cet exemple change la couleur de police de toutes les lignes paires d'un tableau en gris clair.

Modifiez le style de bordure des cellules de la première colonne du tableau :

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

Copier après la connexion

Cet exemple modifie la bordure droite des cellules de la première colonne du tableau en une bordure gris clair de 1 pixel. 🎜🎜🎜Masquer la dernière colonne du tableau : 🎜🎜

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]);
    }
}

Copier après la connexion

🎜Cet exemple supprime la dernière colonne de cellules du tableau. 🎜🎜Résumé🎜🎜Dans cet article, nous avons appris à modifier les styles de tableau à l'aide de JavaScript. En utilisant ces techniques, vous pouvez facilement créer et modifier des tableaux embellis. Selon vos besoins, vous pouvez utiliser JavaScript pour ajouter des effets dynamiques et de l'interactivité au tableau. Maintenant que vous avez appris à modifier les styles de tableaux, essayez d'utiliser JavaScript pour embellir vos tableaux ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!