Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Question

Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Having trouble opening a new page when tapping on a cell (TR) using Javascript. Despite trying various online tutorials, I still can't get it to work properly. Any assistance would be greatly appreciated. Thank you.

Below is the code snippet:

function generateTableBirre() 
{
    var birre = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
    var price = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];

    var table = document.createElement("table");
    table.border = "1";
    table.className = "Birre";
    table.cellSpacing = 20;

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

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

        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 need to view the table, click on the following image: https://i.sstatic.net/zattp.png

javascript html jquery css tr

Answer 1

Answer №1

This JavaScript code creates a table with 2 cells per row. The first cell contains a div with a text paragraph, while the second cell contains a div with an anchor and an image.

Note: Each id must be unique, so any duplicate ids have been removed. Additional selectors can be added using classList.add("...")

In the CSS, you can customize the image width, font, color, etc. For example:

#dvTable img { max-width: 250px; height: auto; border: 0; }

    function generateTableBirre() {
      // array of beer records
      var beers = ["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("Beers");
      table.setAttribute('border', '1');
      table.setAttribute('cellspacing', '20');
      // loop through array and create rows
      for (var i = 0; i < beers.length; i++) {
        var row = document.createElement('tr');
        // loop to create two cells per row
        for (var j = 0; j < 2; j++) {
          var cell = document.createElement('td');
          // add inner div to each cell
          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 has a paragraph
            var par = document.createElement("p");
            par.innerHTML = beers[i] + ' - ' + price[i];
            div.appendChild(par);
          } else {
            // cell 1 has an image inside 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 to id=dvTable
      var dvTable = document.getElementById("dvTable");
      dvTable.innerHTML = "";
      dvTable.appendChild(table);
    }
    generateTableBirre();

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

Answer 2

This JavaScript code creates a table with 2 cells per row. The first cell contains a div with a text paragraph, while the second cell contains a div with an anchor and an image.

Note: Each id must be unique, so any duplicate ids have been removed. Additional selectors can be added using classList.add("...")

In the CSS, you can customize the image width, font, color, etc. For example:

#dvTable img { max-width: 250px; height: auto; border: 0; }

    function generateTableBirre() {
      // array of beer records
      var beers = ["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("Beers");
      table.setAttribute('border', '1');
      table.setAttribute('cellspacing', '20');
      // loop through array and create rows
      for (var i = 0; i < beers.length; i++) {
        var row = document.createElement('tr');
        // loop to create two cells per row
        for (var j = 0; j < 2; j++) {
          var cell = document.createElement('td');
          // add inner div to each cell
          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 has a paragraph
            var par = document.createElement("p");
            par.innerHTML = beers[i] + ' - ' + price[i];
            div.appendChild(par);
          } else {
            // cell 1 has an image inside 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 to id=dvTable
      var dvTable = document.getElementById("dvTable");
      dvTable.innerHTML = "";
      dvTable.appendChild(table);
    }
    generateTableBirre();

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

Answer 3

Answer №2

give this a shot,

function createBeerTable() {
//Build an array of different beer types.
var beers = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
var prices = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];

//Create an HTML table element.
var table = document.createElement("table");
table.border = "1";
table.className = "Beers";
table.cellSpacing = 20;

//Populate the table with data rows.
for (var i = 0; i < beers.length; i++) {

    var row = document.createElement("tr");
    table.appendChild(row);
    var cell = document.createElement("td");
    var generalDiv = document.createElement("div");
    generalDiv.className = "General-Div";

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

        var div = document.createElement("div");
        div.id = "beer-name-price-div";

            var namePrice = document.createElement("p");
            namePrice.innerHTML = beers[i] + ' - ' + prices[i];
            namePrice.id = "beer-name-price";

        div.appendChild(namePrice);

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

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

    cell.appendChild(generalDiv);
}
var beerTableContainer = document.getElementById("beerTableContainer");
beerTableContainer.innerHTML = "";
beerTableContainer.appendChild(table);
}

Answer 4

give this a shot,

function createBeerTable() {
//Build an array of different beer types.
var beers = ["Heineken", "Nastro Azzurro", "Bjørne", "Leffe", "Peroni"];
var prices = ["3,00$", "1,00$", "3,00$", "2,00$", "4,50$"];

//Create an HTML table element.
var table = document.createElement("table");
table.border = "1";
table.className = "Beers";
table.cellSpacing = 20;

//Populate the table with data rows.
for (var i = 0; i < beers.length; i++) {

    var row = document.createElement("tr");
    table.appendChild(row);
    var cell = document.createElement("td");
    var generalDiv = document.createElement("div");
    generalDiv.className = "General-Div";

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

        var div = document.createElement("div");
        div.id = "beer-name-price-div";

            var namePrice = document.createElement("p");
            namePrice.innerHTML = beers[i] + ' - ' + prices[i];
            namePrice.id = "beer-name-price";

        div.appendChild(namePrice);

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

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

    cell.appendChild(generalDiv);
}
var beerTableContainer = document.getElementById("beerTableContainer");
beerTableContainer.innerHTML = "";
beerTableContainer.appendChild(table);
}

Is there a way to make a table row clickable? I tried finding solutions online, but none of them seemed to work for me

Answer №1

Answer №2

Similar questions

Modify the key within an array of objects that share a common key

I have successfully established a new channel, but I am having difficulty retrieving the unique identifier for it

As the user scrolls down, the navigation becomes obscured by the content

more concise jQuery script

Using AJAX to remove data from a database

Arranging the columns of a matrix

Create a basic single page application with Node.js and Express

Exploring Vue.js: Navigating Through an Array of Images Nested Within Another Array

The JavaScript alert box cannot retrieve data from the PHP parent page

Tips for building an API using an app router in Next.js

Traversing an array in Javascript by iterating through its elements

Finding the class name of the parent div: A simple guide

What is the proper way to include "arr[i]" within a for loop?

Send back a JsonResult containing a collection of objects from an MVC controller

Oops! Looks like there's a hiccup with the express-validator plugin as the validation fails due to req.checkBody not being recognized as

The fetch() POST request is met with an error message stating "415 Unsupported Media Type"

The jQuery .load() function does not seem to be functioning properly on secure HTTPS connections

Encountered an issue with reading the property 'drop' from an undefined source during a straightforward migration

Testing for ajax failure using Q-Unit in a unit test

changing tooltip color in bootstrap based on the parent element