Interact with the cells in the table by clicking on them and managing class modifications for

Question

Interact with the cells in the table by clicking on them and managing class modifications for

Table structure:

<table class="ui celled table unstackable" id="tblHits">
        <thead>
            <tr>
                <th>40</th>
                <th>40</th>
                <th>40</th>
                <th>25</th>
                <th>15</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="addNone" id="t01">01</td>
                <td class="addNone" id="t02">02</td>
                <td class="addNone" id="t03">03</td>
                <td class="addNone" id="t04">04</td>
                <td class="addNone" id="t05">05</td>
            </tr>
        </tbody>
    </table>

Issue with clicking and changing classes:

$("#tblHits:has(td)").click(function(e) {
    var clickedCell= $(e.target).closest("td");
    if ( $('#t'+ clickedCell.text() + '').hasClass( "addNone" )) {
         $("#tblHits td").removeClass("addNone");
         $('#t'+ clickedCell.text() + '').addClass("addHit");
         alert('Clicked table cell value is: <b> ' + clickedCell.text());
    }
    else if ( $('#t'+ clickedCell.text() + '').hasClass( "addHit" )) {

         $("#tblHits td").removeClass("addHit");
         $('#t'+ clickedCell.text() + '').addClass("addMiss");
         alert('Clicked table cell value is: <b> ' + clickedCell.text());
     }
     else if ( $('#t'+ clickedCell.text() + '').hasClass( "addMiss" )) {
         $("#tblHits td").removeClass("addMiss");
         $('#t'+ clickedCell.text() + '').addClass("addNone");
         alert('Clicked table cell value is: <b> ' + clickedCell.text());
     });

Your input on resolving this issue is appreciated. Thank you!

javascript jquery html css

Answer 1

Answer №1

Implement "event delegation" to capture clicks on a parent element (similar to how you listened for clicks on the table). However, retrieving the clicked cell appears to be problematic.

Simply verify if the clicked element is the desired td, and proceed accordingly. This approach not only enhances performance by allowing early script termination for uninteresting clicks, but also streamlines the logic.

$('#tblHits').on('click', function (evt) {
    var $td = $(evt.target);
    if (!$td.is('td')) return;

    if ($td.hasClass('addNone')) {
       $td.removeClass('addNone').addClass('addHit');
    } else
    if ($td.hasClass('addHit')) {
       $td.removeClass('addHit').addClass('addMiss');
    } else
    if ($td.hasClass('addMiss')) {
       $td.removeClass('addMiss').addClass('addNone');
    }
});

Check out this fiddle: https://jsfiddle.net/bkry0txr/4/

Additionally, it's recommended to introduce another class name to the td selection, like so:

<tr>
  <td class="hitbox addNone"></td>
  <td class="hitbox addHit"></td>
  <!-- etc -->
</tr>

Subsequently in the JS:

$('#tblHits').on('click', function (evt) {
    var $td = $(evt.target);
    if (!$td.is('.hitbox')) return;
    // etc..
});

This method allows for flexibility with other td elements or alternative elements. As long as the desired element retains the 'hitbox' classname, the JS functionality remains unchanged.

Answer 2

Implement "event delegation" to capture clicks on a parent element (similar to how you listened for clicks on the table). However, retrieving the clicked cell appears to be problematic.

Simply verify if the clicked element is the desired td, and proceed accordingly. This approach not only enhances performance by allowing early script termination for uninteresting clicks, but also streamlines the logic.

$('#tblHits').on('click', function (evt) {
    var $td = $(evt.target);
    if (!$td.is('td')) return;

    if ($td.hasClass('addNone')) {
       $td.removeClass('addNone').addClass('addHit');
    } else
    if ($td.hasClass('addHit')) {
       $td.removeClass('addHit').addClass('addMiss');
    } else
    if ($td.hasClass('addMiss')) {
       $td.removeClass('addMiss').addClass('addNone');
    }
});

Check out this fiddle: https://jsfiddle.net/bkry0txr/4/

Additionally, it's recommended to introduce another class name to the td selection, like so:

<tr>
  <td class="hitbox addNone"></td>
  <td class="hitbox addHit"></td>
  <!-- etc -->
</tr>

Subsequently in the JS:

$('#tblHits').on('click', function (evt) {
    var $td = $(evt.target);
    if (!$td.is('.hitbox')) return;
    // etc..
});

This method allows for flexibility with other td elements or alternative elements. As long as the desired element retains the 'hitbox' classname, the JS functionality remains unchanged.

Answer 3

Answer №2

To add interactivity to your table cells, you can set up a click event listener for each td. Then, based on the current CSS class of the clicked cell, you can modify its styling accordingly.

Avoid using the selector $('#t'+ clickedCell.text()) as it is unnecessary in this scenario.

$( "td" ).each(function(index) {
  $(this).on("click", function(){

    if ($(this).hasClass('addNone')) {
       $(this).removeClass('addNone').addClass('addHit');
    } else if ($(this).hasClass('addHit')) {
       $(this).removeClass('addHit').addClass('addMiss');
    } else if ($(this).hasClass('addMiss')) {
       $(this).removeClass('addMiss').addClass('addNone');
    }

  });
});

Answer 4

To add interactivity to your table cells, you can set up a click event listener for each td. Then, based on the current CSS class of the clicked cell, you can modify its styling accordingly.

Avoid using the selector $('#t'+ clickedCell.text()) as it is unnecessary in this scenario.

$( "td" ).each(function(index) {
  $(this).on("click", function(){

    if ($(this).hasClass('addNone')) {
       $(this).removeClass('addNone').addClass('addHit');
    } else if ($(this).hasClass('addHit')) {
       $(this).removeClass('addHit').addClass('addMiss');
    } else if ($(this).hasClass('addMiss')) {
       $(this).removeClass('addMiss').addClass('addNone');
    }

  });
});

Interact with the cells in the table by clicking on them and managing class modifications for

Answer №1

Answer №2

Similar questions

Constantly encountering errors instead of obtaining results with each AJAX call

A step-by-step guide on setting --max-old-space-size using the npm link command

How does the max() function in JavaScript handle arrays when there are multiple numbers of the same maximum value?

Is there a method to pre-load a CSS background image so that it can still be displayed even without an internet connection?

Analyzing an HTTP response containing a Content-Type header specifying image/jpeg

Using `v-if` with a Vuex getter

Utilizing RSelenium for accessing a website built using the <td> element

The image is failing to animate according to the PNG sequence function

Is there a way to design a form that appears as though it's levitating above a div element?

Seeking assistance with printing an HTML template using a printer in Angular 2. Can anyone provide guidance on how

Creating fixed or absolute position tooltips for iPhones and iPads: A step-by-step guide

From vanilla JavaScript to the powerful lodash library

Is it considered a best practice in React to modify styles of elements using the className state?

Retrieve the background color using code-behind

How can I trigger an event in Vue.js when a selection is made in a dropdown menu?

What is the best way to effectively clear memory in THREE.js?

Is there a way to automatically display the first highlighted fragment in reveal.js?

Toggling checkboxes based on user input

Incorporate a captivating background image into your SVG design

Searching for a key and swapping it with a corresponding value in JavaScript or Node.js