javascript - CSS nth-child 选择器不适用于 JS 创建的表
问题描述
我有一个网页,其中表格的内容来自 Google 表格。tr
我通过创建表格元素 ( , td
) 并将它们作为子元素添加到表格中,如下所示。然后我尝试应用 CSS 为具有不同颜色的交替行着色。事实证明,它只为选择的第一个实例着色。
HTML
<table id="list">
<thead></thead>
<tbody></tbody>
</table>
JS
document.addEventListener('DOMContentLoaded', function() {
google.script.run.withSuccessHandler(makeList).getList();
});
// my Google Sheet data is in the "data" parameter below
function makeList(data) {
console.log(data[0]);
// Add Header
var tbHead = document.querySelector('#list thead');
var tr = document.createElement('tr');
data[0].map(function(h) {
var th = document.createElement('th');
th.textContent = h;
tr.appendChild(th);
tbHead.appendChild(tr);
});
data.splice(0,1);
console.log(data[0]);
// Add rows
var tbBody = document.querySelector('#list tbody');
data.map(function(r) {
var tr = document.createElement('tr');
r.map(function(d) {
var td = document.createElement('td');
td.textContent = d;
tr.appendChild(td);
tbBody.appendChild(tr);
});
});
// At this point the table is filled correcty (at leat visually)
// Styling table
configureTable();
}
// JS to change CSS of Table
function configureTable() {
// The selection below selects only the second element of the table body, and not all of the even elements, the same happens if I select 2n.
var tbEvenRow = document.querySelector("#list tbody tr:nth-child(even)");
tbEvenRow.style.backgroundColor = "cyan";
}
那么,是不是当我添加每个元素与appendChild()
兄弟部分时没有更新的原因?到底发生了什么?
解决方案
您应该使用 querySelectorAll 而不是 querySelector。因为 querySelector 只给你一个元素。因此,您的代码将如下所示:
// JS to change CSS of Table
function configureTable() {
// The selection below selects only the second element of the table body, and not all of the even elements, the same happens if I select 2n.
var tbEvenRows = document.querySelectorAll("#list tbody tr:nth-child(even)");
for ( let i = 0; i < tbEvenRows.length; i++) {
tbEvenRoww[i].style.backgroundColor = "cyan";
}
}
推荐阅读
- java - 使用 appium 从任何 android 设备的通知栏中清除所有通知
- android - 如何共享带有标题的 pdf [不应显示 UNTITLED]
- java-8 - Jasperserver 6.3.0 (Tomcat 8.0.14) startup.bat:无法识别的选项:--JvmMs
- java - 从 Spring 3 升级到 Spring 5 - 现在自动装配错误
- java - 如何让 setTextSize 在 Android 8.0 上工作?
- javascript - 使用 Antd 上传操作将图像上传到 Firebase 存储时出现问题
- javascript - 将 javascript 函数变量的值存储到 php 变量中,无需 POST 表单
- r - 连接两个箱线图以显示 ggplot2 中的重要性
- angular - 当 api 调用在角度 2 中失败时如何捕获错误
- java - 覆盖 install4j UnixLauncher WM_CLASS 属性