Question

There is table to search and highlight as per parameters

When user slide the slider value changes and as per value it highlight the TD.

1. So as per the column it should highlight. Currently I have added
   class to td (like col-1, col-2.. ) but can this be done without
   adding class.

2. When the value is “2” then “12” is also highlight. What can be done
   in this matter?

Live URL

jQuery( "#slider-vertical" ).slider({ // First Slider Voltage
            orientation: "vertical",
            range: "min",
            min: 2,
            max: 16,
            step: 2,
            slide: function( event, ui ) {              
                jQuery( "#amount" ).val( ui.value );
                jQuery("#tableData td.col-1").removeClass("jquery-colorBG-highLight");  // add
                var highlightTD = jQuery('#tableData tr td.col-1:contains(\'' + ui.value + '\')');              
                highlightTD.addClass("jquery-colorBG-highLight");
            }
        });

Answer 1

1) I guess adding a class to the appropriate TD’s is a pretty good way to get what you want.

2) I don’t think there is a CSS selector checking for content equality, but you could use a filter:

var highlightTD = jQuery('#tableData tr td.col-1').filter(function() {
    return $(this).text() == ui.value;
});