使用 querySelectorAll 方法并在单击时创建表

Question

我的教授指派我执行以下操作： 创建一个 HTML 文件以使用 JavaScript 实现文档对象模型的概念。

• 使用 getElementById 方法并写入元素

• 使用 getElementsTagName 方法并更改颜色并向元素添加边框

• 使用 getElementsByClassName 方法，对于具有相同类名的段落和标题，更改对齐方式

• 使用 querySelectorAll 方法并在单击时创建表

但是我不知道如何实现最后一个......我可以帮忙吗？

function msg4(){

    var table = querySelectorAll("table");

    //alert("Testing...");

    var row = table.insertRow(0);

    var cell1 = row.insertCell(0);

    var cell2 = row.insertCell(1);

    cell1.innerHTML = "NEW CELL1";

    cell2.innerHTML = "NEW CELL2";

}

Answer 1

您可以使用下面的代码使用对象创建表let mountains = [  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },  { name: "Monte Amiata", height: 1738, place: "Siena" }];function generateTableHead(table, data) {  let thead = table.createTHead();  let row = thead.insertRow();  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();    for (key in element) {      let cell = row.insertCell();      let text = document.createTextNode(element[key]);      cell.appendChild(text);    }  }}let table = document.querySelector("table");let data = Object.keys(mountains[0]);generateTableHead(table, data);generateTable(table, mountains);