如何将属性设置为由 insertRow() 创建的 tbody？

Question

我正在尝试动态创建一个具有 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>

Answer 1

你只需要得到它的参考。 您可以简单地查询第一个 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');