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:

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

The Implementation of Comet Programming

What is the best way to include an "average" line in a nvd3.js Stacked Area Chart?

Modifying button appearance upon clicking using JavaScript

Customize a theme component only when it is a child of another component

Issues with the .change(function() JavaScript in Internet Explorer versions less than 9

I'm attempting to access a PHP file by clicking a button using AJAX and jQuery

Attempting to organize date and time down to the second

Dynamic Searching in ASP.NET Core MVC Select Component

Guide to Spidermonkey Bytecode Documentation

The Access-Control-Allow-Origin error is preventing the Angularjs post request from going through

An AJAX script for dynamically adding, modifying, and removing records from a database

The navbar does not dictate the views

Performing an AJAX request to send data containing special characters

Working with PHP to transfer toggle switch information to JSON

Conceal an element within the initial row of the table

Avoiding layout shift when a button is clicked in React JS

Implementing specific CSS styles for images that exceed a certain size limit

Automatically update certain attributes of an object with Spring MVC's auto-refresh feature

Having trouble deleting the value and deselecting the checkbox item?

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"