javascript - 如何将属性设置为由 insertRow() 创建的 tbody?
问题描述
我正在尝试动态创建一个具有 thead 和 tbody 元素的表,并将 setAttribute 应用于 teh thead 和 tbody。我设法将 setAttribute 设置为 thead 元素,但我不知道如何将 setAttribute 设置为由 insertRow() 创建的 tbody。这甚至可能吗?
let myData = [
{ key1: "firstName1", key2: "lastName1", key3: "address1", key4: "DOB1" },
{ key1: "firstName2", key2: "lastName2", key3: "address2", key4: "DOB2" },
{ key1: "firstName3", key2: "lastName3", key3: "address3", key4: "DOB3" },
{ key1: "firstName4", key2: "lastName4", key3: "address4", key4: "DOB4" }
];
function generateTableHead(table, data) {
let thead = table.createTHead();
let row = thead.insertRow();
thead.setAttribute("id", "table1header");
for (let key of data) {
let th = document.createElement("th");
let text = document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTable(table, data) {
for (let element of data) {
let row = table.insertRow();
let cell = row.insertCell();
let cell2 = row.insertCell();
let text = document.createTextNode(element["key2"]);
let text2 = document.createTextNode(element["key4"]);
cell.appendChild(text);
cell2.appendChild(text2);
}
}
let table = document.querySelector("#myTable");
let data = ["key2", "key4"];
// let data = Object.keys(myData[0]);
console.log(data);
generateTable(table, myData); // generate the table first
generateTableHead(table, data); // then the head
table,
th,
td {
border: 1px solid black;
}
<table id="myTable">
</table>
解决方案
你只需要得到它的参考。您可以简单地查询第一个 tbody 的表元素。
...
...
.someClass {
color: #888;
}
...
...
generateTable(table, myData); // generate the table first
generateTableHead(table, data); // then the head
// get reference to the tbody and add a class to it for styling
let tbody = table.querySelector('tbody');
tbody.classList.add('someClass');
推荐阅读
- reactjs - TypeError: (0 , _system.css) 不是 Jest 和 Material UI 的函数错误
- javascript - 我可以在 streamlit Web 应用程序中显示自定义 javascript
- python - 如何在python中将数字列表拆分为电话号码?
- mysql - nodemon 错误 - 在不同的目录中打开?它正在另一个目录中查找模块
- linux - Bash 中的 FFMPEG - 为“电影”过滤器指定的输入过多
- android - 如何同时做填充和大纲TextInputLayout android?
- phpdotenv - 在 php 项目中使用包 dotenv 时出错
- magento - Magento 1(可能是 1.9.2.3)中的旧站点不再正确显示
- react-native - react native @react-native-community/slider 在 Animated.View 组件中不起作用
- python - 如何从黄砖 ROCAUC 中删除标题