Member Avatar for Mati_1

I have some html tables on the page, and some checkboxes whose values to be highlighted on the assigned table. The example code can be seen here : https://jsfiddle.net/9kq5djwr/

What I need to do is only the assigned table values to be highlighted by that specific checkbox group. So when first checkbox group is clicked, values on table1 will be highlighted. and it goes on like that. The HTML tables have the same values, only their table id is unique and different.

This is just an example fiddle, there will be more checkbox groups and tables. I seek a way to do this automatically, without any manual change every time. since the checkbox values will be updated regularly. Can I get any help on this? please.

  • 2 Contributors
  • 2 Replies
  • 424 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jstfsklh211

Dani AI

Generated

A reliable pattern is to bind one handler to each checkbox group, store a pointer to the matching table on that group (data-table or data-target), and then limit all DOM changes to only that table. That follows ’s idea of storing the table id in the form/element but avoids the global removal of highlights that clears every table. The group→table mapping makes the solution automatic so checkbox value updates don’t require manual JS changes.

Example implementation (event delegation, normalization, and per-table clearing):

$('.checkbox-group').on('change', 'input[type=checkbox]', function () {
  var $group = $(this).closest('.checkbox-group');
  var tableSelector = $group.attr('data-table'); // e.g. "#table1"
  var $table = $(tableSelector);
  var checked = $group.find('input[type=checkbox]:checked')
                     .map(function(){ return String(this.value).trim().toLowerCase(); })
                     .get();
  var lookup = {};
  for (var i = 0; i < checked.length; i++) lookup[checked[i]] = true;

  $table.find('td').removeClass('matched'); // clear only inside this table

  $table.find('td').each(function () {
    var cellVal = ($(this).attr('data-value') || $(this).text()).trim().toLowerCase();
    if (lookup[cellVal]) $(this).addClass('matched');
  });
});

Notes and troubleshooting: use a data-value attribute on td when cell HTML or markup would break a simple text match (links, icons, extra whitespace). Normalize case and trim both checkbox values and cell values to avoid false negatives. For very large tables build an index (value → list of TDs) once and reuse it; rebuild when table content changes. Keep event wiring delegated to a stable parent so dynamically added groups work without re-binding. Finally, avoid color-only highlights for accessibility—add an outline, bolding, or aria-selected so matches are perceivable for all users.

Recommended Answers

All 2 Replies

Member Avatar for Mati_1

I'd be glad if a jquery expert can help me with this code really.

Member Avatar for jstfsklh211

you need to lookup the table id for the table you want to work with in your check function
store the table id in each form or elements

$('td').removeClass("highlight")
this basically says every td on the page

you need $(table#tableID td)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.