使用 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);