如何使 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

试试这个，

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++) {

    //var row = table.insertRow(-1);
    //var cell = row.insertCell(-1);

    var row = document.createElement("tr");
    table.appendChild(row);
    var cell = document.createElement("td");
    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);
    row.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 2

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

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

在css中可以设置图片宽度、字体、颜色等样式。例如#dvTable img { max-width: 250px; height: auto; border: 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>