javascript - 如何使 tableRow 可点击？我在网上看过但是没用

Question

我想在 Javascript 中点击单元格 (TR) 时打开一个新页面。我在网上搜索了很多教程，但效果不佳。我希望有人能帮助我。谢谢。

这是我的代码:

function generateTableBirre() 
{
    //Build an array containing Customer records.
    var birre = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
    var price = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];

    //Create a HTML Table element.
    var table = document.createElement("Table");
    table.border = "1";
    table.className = "Birre";
    table.cellSpacing = 20;

    //Add the data rows.
    for (var i = 0; i < birre.length; i++) {
        row = table.insertRow(-1);
        var cell = row.insertCell(-1);

        var generalDiv = document.createElement("div");
        generalDiv.className = "General-Div";

        // Create an a tag
        var a = document.createElement('a');
        a.href = "Antipasti.html";
        a.appendChild(cell);
        cell.appendChild(a);
        

            var div = document.createElement("div");
            div.id = "div-nome-prezzo-birre";

                var nameprezzo = document.createElement("p");
                nameprezzo.innerHTML = birre[i] + ' - ' + price[i];
                nameprezzo.id = "nome-prezzo-birre";

            div.appendChild(nameprezzo);

        var image = document.createElement("img");
        image.src = "https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png"
        image.id = "image-bibite";

        generalDiv.appendChild(div);
        generalDiv.appendChild(image);

        cell.appendChild(generalDiv);
    }

    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);
}

如果你想显示表格，这里是图像:

Answer 1

在下面的 Javascript 中，表格是用每行 2 个单元格创建的。在第一个单元格中，您会找到一个带有文本段落的 div。在第二个单元格中，您会找到一个带有 anchor 和图像的 div。

重要提示:id 必须是唯一的，因此我必须删除创建重复 id 的行。如果你想使用额外的选择器，那么你可以使用 classList.add("...")

在 css 中，您可以设置图像宽度、字体、颜色等样式。例如 #dvTable img { max-width: 250px;高度:自动；边界:0； }

    function generateTableBirre() {
      // array containing records
      var birre = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
      var price = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];
      // create table
      var table = document.createElement('table');
      table.classList.add("Birre");
      table.setAttribute('border', '1');
      table.setAttribute('cellspacing', '20');
      // loop through the array and create rows
      for (var i = 0; i < birre.length; i++) {
        var row = document.createElement('tr');
        // loop from 0 to 1 to create two cells on each row
        for (var j = 0; j < 2; j++) {
          var cell = document.createElement('td');
          // give each cell a inner div
          var div = document.createElement("div");
          div.classList.add("General-Div");
          cell.appendChild(div);
          // different content in cell 0 and cell 1
          if (j == 0) {
            // cell 0 contains paragraph
            var par = document.createElement("p");
            par.innerHTML = birre[i] + ' - ' + price[i];
            div.appendChild(par);
          } else {
            // cell 1 contains image in an anchor
            var anch = document.createElement('a');
            anch.setAttribute('href', 'Antipasti.html');
            div.appendChild(anch);
            var img = document.createElement("img");
            img.setAttribute('src', 'https://www.talkwalker.com/images/2020/blog-headers/image-analysis.png');
            anch.appendChild(img);
          }
          row.appendChild(cell);
        }
        table.appendChild(row);
      }
      // append table in id=dvTable
      var dvTable = document.getElementById("dvTable");
      dvTable.innerHTML = "";
      dvTable.appendChild(table);
    }
    generateTableBirre();

<div id="dvTable">
</div>