Maison > Article > interface Web > Comment modifier le style du tableau avec javascript

Comment modifier le style du tableau avec javascript

王林original: 2023-05-21 09:37:071457parcourir

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>

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; signifie que l'épaisseur de la bordure au bas de chaque ligne de données est de 1 pixel et la couleur est gris clair.

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

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

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

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

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

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

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

JavaScript css padding border td tr th

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Modification CSS de DreamweaverArticle suivant：Modification CSS de Dreamweaver

Articles Liés

Voir plus