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

【问题标题】：How do I setAttribute to tbody created by insertRow()?如何将属性设置为由 insertRow() 创建的 tbody？
【发布时间】：2020-06-13 02:50:44
【问题描述】：

我正在尝试动态创建一个包含 thead 和 tbody 元素的表，并将 setAttribute 应用于 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>

【问题讨论】：

标签： javascript html html-table setattribute

【解决方案1】：

您只需要获取它的引用即可。您可以简单地查询第一个 tbody 的 table 元素。

...
...
.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');

【讨论】：