How can I make a tableRow tappable? I've watched online but it didn't work

Viewed 62

I would like to open a new page when I tap a cell (TR) in Javascript. I've searched a lot of tutorials online but it doesn't work as well. I hope that someone could help me. Thanks.

Here is my code:

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);
}

If you would like to show the table, here is the image: enter image description here

2 Answers

try this,

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);
}

In the Javascript below the table is created with 2 cells per row. In the first cell you'll find a div with a text paragraph. In the second cell you'll find a div with anchor and image.

Important: an id must be unique so I had to remove lines where duplicate id's were created. If you want to use extra selectors then you can use classList.add("...")

In the css you can style the image width, font, color, etc. For example #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>

Related