Maison >interface Web >Questions et réponses frontales >Comment modifier le style du tableau avec javascript
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%;
signifie que la table occupe 100% de la largeur du conteneur parent. 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;
signifie que la distance entre les données et la bordure est de 8 pixels. 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.
document.getElementsByTagName("table")[0].style.backgroundColor = "#f9f9f9";
var th = document.getElementsByTagName("th"); for (var i = 0; i < th.length; i++) { th[i].style.backgroundColor = "#ddd"; }
var td = document.getElementsByTagName("td"); for (var i = 0; i < td.length; i++) { td[i].style.fontSize = "16px"; }
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"; } }
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!