Display icons within each table cell row

Question

Display icons within each table cell row

Objective:
I want to implement a feature where icons appear when the cursor is inside a td row, allowing users to click on them. These icons will contain links.

When the cursor moves to a new td row, the previous row should return to its default state and the new row should display the updated icon set.

Refer to the image for visual guidance.

Challenge:
I am uncertain about how to go about implementing this functionality.

Tools in Use:
I rely on bootstrap, jQuery, and Visual Studio for development.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

By incorporating icons into your rows during creation and applying a specific style

style='display:none;'

you can then use jQuery to loop through the rows.

$(table tr).each(function () {
    if ($(this).is(':hover')) 
      $('icondiv').show();
    else
    $(this).hide();
});

If you need to trigger actions based on clicking the icons, add a data-* attribute to each icon to track the corresponding row.

In jQuery, retrieve these attributes using the data() function like this:

$('icondiv').data('id');

Answer 2

By incorporating icons into your rows during creation and applying a specific style

style='display:none;'

you can then use jQuery to loop through the rows.

$(table tr).each(function () {
    if ($(this).is(':hover')) 
      $('icondiv').show();
    else
    $(this).hide();
});

If you need to trigger actions based on clicking the icons, add a data-* attribute to each icon to track the corresponding row.

In jQuery, retrieve these attributes using the data() function like this:

$('icondiv').data('id');

Answer 3

Answer №2

One simple method is to utilize CSS In your HTML, assign a class to the div that contains icons.

<div class="IconContainer">
    <!-- Icons go here  -->
</div>

Then, in your CSS:

.IconContainer{
    display: none;
}
tr:hover .IconContainer{
    display: block;
}

Alternatively: If you prefer to use jQuery for this functionality

$(document).ready(function(){
   $('table tr').hover(function(){
      $(this).find('.IconContainer').show();
   },function(){
      $(this).find('.IconContainer').hide();
   });
});

Answer 4

One simple method is to utilize CSS In your HTML, assign a class to the div that contains icons.

<div class="IconContainer">
    <!-- Icons go here  -->
</div>

Then, in your CSS:

.IconContainer{
    display: none;
}
tr:hover .IconContainer{
    display: block;
}

Alternatively: If you prefer to use jQuery for this functionality

$(document).ready(function(){
   $('table tr').hover(function(){
      $(this).find('.IconContainer').show();
   },function(){
      $(this).find('.IconContainer').hide();
   });
});

Display icons within each table cell row

Answer №1

Answer №2

Similar questions

Having trouble finding a solution to prevent code from automatically adding a class in jQuery/JavaScript?

How can I configure the Google Chrome script debugger to pause on exceptions?

What is the best way to implement a loop using JQuery?

Deleting a document by ObjectID in MongoDB with Node and Express without using Mongoose: A step-by-step guide

Trouble with Alignment in Bootstrap 3 Form

"Learn how to pass around shared state among reducers in React using hooks, all without the need for Redux

Create a custom VueJS component by utilizing an npm package

Populating Modal on open with jquery/javascript

Error: Unable to access the 'Result' property because it is undefined

Only send file input to the server when it is changed, and disregard any other inputs until the form is submitted

Can someone provide a method to access the namespace of an Angular controller when utilizing the "Controller As" format?

Is the jqm flipswitch with the label on the left and the switch on the right?

Unable to stop React HTMLAudioElement from playing

I am working with two dropdown menus and I need to search the database for data that matches both selections. Unfortunately, the code I have written does not seem to be functioning correctly

Tips for stopping a page from reloading when a link is clicked

Efficient Pagination with React Redux

Plugin for creating custom dropdown menus using JQuery

Updating State Array dynamically with React JS

Is there any method to determine whether a floated element has been pushed down?

Hindering advancement: Bootstrap Form Wizard causing roadblocks