Row within a table displaying link-like behavior

Here is the code I'm currently using:

$('.table-striped tr').click( function() {
    var link = $(this).find('a').attr('href');
    if(link != 'undefined') {
        window.location = link;
    }
}).hover( function() {
    $(this).toggleClass('hover');
});

It's working perfectly fine (the <a> is hidden). Additionally, I have a nice CSS rule for td:hover that highlights the entire row.

Now, what I'm looking to add is:

  • The ability to right-click and "open in new tab/window"
  • Middle Click Functionality

Do you happen to know how to achieve this?

javascripthtmlcsshyperlinkhtml-table

Answer №1

The default actions of browsers for context menu and middle click are specifically programmed for links (<a/>). It is usually not possible to replicate these behaviors on other elements. However, with some JavaScript, you can achieve a similar effect.

For example, if you want to open a link in a new tab on middle click (similar to most browsers), you can use the following event:

$("#foo").live('click', function(e) { 
    if (e.which == 2) {
        e.preventDefault();

        // open new tab/window
        window.open('path');
    }
});

Recreating the context menu can be more challenging, as mimicking the original appearance might be difficult (or even impossible). Nonetheless, you have the option to create your own context menu using various jQuery plugins. Simply search on Google.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Promise Fundamentals

While I am quite familiar with coding in JavaScript, the benefits of promises in the JS world still seem somewhat unclear to me. Below is an example of asynchronous calls using callbacks nested within each other. (function doWorkOldSchool() { setTime ...

javascriptpromise

Determine the exposed area of an element with overflowing content

I am looking for a way to determine which text within an element (such as a div or textbox) is currently visible when there is overflow. As the user scrolls, I need to have an updated list of the visible text. I am open to using any elements, but only a ...

javascriptjquery

Creating a repeating sequence in HTML: A step-by-step guide

I have an HTML file containing a portfolio. Each portfolio item is structured like this: <div class="item"> <div class="portfolio-item"> <a href="img/portfolio-item-1.jpg" data-lightbox="ima ...

htmlloops

Firefox triggers drag events while passing over a div scrollbar

I am looking to create a file drag and drop feature using a styled div: When dragging files over the div, I want the border color to change When dragging files out of the div, I want the border color to revert back to the original In Firefox 35 (Ubuntu) ...

javascriptjqueryhtmlfirefox

When <tr> is used as a link with the target="_blank" attribute

I'm facing an issue with my HTML and jQuery code. I'm trying to make a table row act as a link, but I'm struggling to figure out how to add the target="_blank" attribute. Could someone assist me in resolving this? Below is the snippet of H ...

jqueryhtmlhtml-table

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

What is the method for setting a function as the initial value of a state variable?

Here is a function I have: async function setAllValues(value) { await stableSort(rows, getComparator(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .forEach((row) => { temp = ...

javascriptreactjsfrontendlogic

Can beautifulsoup handle scraping a "dynamic webpage"?

I am exploring the use of beautifulsoup for web scraping, despite my lack of theoretical knowledge about webpages. I believe I have grasped the basics and will try my best to articulate my question. By a dynamic webpage, I mean a site that changes its HTM ...

pythonhtmlseleniumbeautifulsoup

unusual behavior of UTF-8 characters in Blogger when utilizing JavaScript

I'm facing a peculiar issue with JavaScript in my Blogger code when dealing with certain characters like '¡' and '?'. For instance, the following code snippet displays ñéúüëò¡!¿? inside the div but shows ñéúüëò&# ...

javascriptutf-8blogger

Whenever I try to launch my React app using the `npm start` command in my command

After successfully creating a Simple React App and getting the happy hacking message on cmd, I encountered numerous errors when trying to run "npm start" on cmd. Despite multiple attempts at uninstalling and reinstalling node and npm, the issue persists. H ...

javascriptnode.jsreactjsreact-nativenpm

Why is it that the HttpClient constructor in Angular doesn't require parameters when instantiated through the constructor of another class, but does when instantiated via the 'new' keyword?

I am trying to create a static method for instantiating an object of a class, but I have encountered a problem. import { HttpClient } from '@angular/common/http'; export MyClass { // Case 1 public static init(): MyClass { return this(new ...

javascriptangulartypescript

Having issues with Firefox rendering JavaScript and CSS correctly

I'm trying to figure out if it's the row class from Bootstrap that's causing issues, or if there's a problem with my JS/CSS not loading properly in Firefox. It seems to be working fine in Chrome and Safari. Any ideas on what could be go ...

javascripthtmlcsstwitter-bootstrap

Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

It's common knowledge that achieving this in CSS is a possibility. .makeStyles-mainNavWrapper-67.sticky{ position: fixed; top: 0px; opacity: 1; transition: opacity 1s ease; padding: 10px; } I am curious to find out if this can be achieved ...

javascriptcssreactjsmaterial-ui

Aligning thumbnail images in a jQuery Mobile listview

Hey, I recently added a list view that includes thumbnails. I used the following code: <ul data-role="listview" data-inset="false" data-theme="a" data-dividertheme="d> <li><a href="image.php?imgid=2"> <img src="../images/comma. ...

jquerycssjquery-mobile

What is the best way to access my backend API on a web hosting platform?

To successfully send information from a contact form through an email, I need to access my backend API. My app is deployed on a webhost called Kinghost and I have two URLs provided: the first one is the generic mywebaddr.com:port-number, and the second one ...

javascriptnode.jsreactjsapi

Surprising margin discrepancy of 10px found while utilizing float property in CSS

Encountered an issue with the CSS property "float". There is a 10px margin at the top of the page. How can this be fixed? I tried adding an empty div to the parent div with id="background1", but it did not work. I also found this article https://css-trick ...

csscss-float

Retrieving Dropdown Values based on Selection in Another Dropdown

On my website, there are two dropdown lists available: 1) One containing Book Names 2) The other containing Links to the Books. All data is stored in an XML file structured like this: <?xml version="1.0" encoding="UTF-8"?> <BookDetail> <boo ...

javascripthtmlajaxxmlxslt

Prevent form from being resubmitted upon browser refresh

Currently, I have a form where users input data and it searches the database to display results. The issue arises when the user refreshes the page as it triggers an alert about resubmission. Although the data remains the same upon resubmitting, is there a ...

phpjqueryhtmlmysqlajax

Angular 2 System.config map leading to a 404 error message

I am encountering a 404 error in the browser console while attempting to map the Auth0 module from node_modules in my Angular 2 project using the system.config in the index file. Index File <!-- 2. Configure SystemJS --> <script> System.con ...

javascriptangularauth0

Create a dynamic sitemap for a Laravel website that includes variables in the slugs

My Laravel-based website features URLs like this- xyz.com/search/{id}/{name} These URLs have two variables, allowing for multiple variations such as: xyz.com/search/1/katy xyz.com/search/2/john With potentially thousands of such URLs, I need to creat ...

javascriptphpxmllaravel-4sitemap