我无法弄清楚为什么 javascript 生成的元素没有被我的样式表设置样式

Question

我正在尝试为每个其他行元素制作一个背景颜色交替的表格。 样式似乎适用于 html 代码中的行元素，但是当我使用 javascript 生成更多行时，新行没有样式，我不知道为什么。 任何帮助，将不胜感激。

 /* class Definitions *******************/ class ladder{ constructor(){ this.data; } async getLeaderBoard(){ try{ const ret = await fetch(`https://cors-anywhere.herokuapp.com/https://aoe2.net/api/leaderboard?game=aoe2de&leaderboard_id=3&start=1&count=10`); this.data = await ret.json(); } catch(error){ console.log(error); } } } //table DOM functions const renderCell = player => { const markup = ` <tr class="player-entry"> <td>${player.rank}</td> <td>${player.rating}</td> <td><a href= "">${player.name}</td> <td>${player.games}</a></td> <td>${Math.round(100*player.wins/player.games)/100}</td> </tr>`; document.querySelector('.leaderboards').insertAdjacentHTML('beforeend', markup); }; const renderTable = leaderBoard =>{ leaderBoard.forEach(renderCell); } /*********************** /*MAIN /***********************/ /*store data in window*/ const state = {}; /* * Fetch the data and save in state array */ const dataFetcher = async () =>{ //store the ladder object in state array state.AOELadder = new ladder(); //load ladder from api await state.AOELadder.getLeaderBoard(); //update to UI renderTable(state.AOELadder.data.leaderboard); } dataFetcher();

 .leaderboards{ width:80%; text-align: left; margin-left:3rem; margin-top:3rem; line-height: 1.4rem; border:#888888 solid 1px; border-collapse: collapse; }.leaderboards.title{ border-bottom:#888888 solid 1px; background:#222222; color:#fff; height:2rem; }.leaderboards a{ text-decoration: none; color:#fff; }.leaderboards.player-entry{ background: #999999; border-bottom:#888888 solid 1px; color:#fff; }.leaderboards.player-entry:nth-child(odd){ background: #222222; }

 <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Practice Fetching API Data </title> <link rel="stylesheet" href="style.css"> </head> <body> <table class="leaderboards"> <tr class="title"> <th>Rank</th> <th>Rating</th> <th>Name</th> <th>Games</th> <th>Win Rate</th> </tr> <tr class="player-entry"> <td>565</td> <td>1500</td> <td>dummy-entry</td> <td>1000</td> <td>55%</td> </tr> <tr class="player-entry"> <td>565</td> <td>1500</td> <td>dummy-entry</td> <td>1000</td> <td>55%</td> </tr> <tr class="player-entry"> <td>565</td> <td>1500</td> <td>dummy-entry</td> <td>1000</td> <td>55%</td> </tr> </table> <script type="text/javascript" src= "./main.js"></script> </body> </html>

Answer 1

table标签会自动附加tbody元素（TABLE 必须有一个或多个 TBODY 元素）来换行。 因此，您需要在正文中添加行以确定交替。

只需将您的插入脚本更新为：

document.querySelector('.leaderboards').getElementsByTagName('tbody')[0].insertAdjacentHTML('beforeend', markup);

我无法弄清楚为什么 javascript 生成的元素没有被我的样式表设置样式

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-08-12 01:18:51

我无法弄清楚为什么 javascript 生成的元素没有被我的样式表设置样式

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-08-12 01:18:51

解决方案1
0 已采纳 2020-08-12 01:18:51