Search specific column of table for highlight table data

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;
});

Answer 2

Where the is a part which adds class what I would do is:

Instead of:

var highlightTD = jQuery('#tableData tr td.col-1:contains(\'' + ui.value + '\')');              
highlightTD.addClass("jquery-colorBG-highLight");

Try this:

$('#tableData tr td.col-1').each(function(){
    if ($(this).text() == ui.value()) {
        $(this).addClass("jquery-colorBG-highLight");
    }

});              

Answer 3

1. To select a column in a table, you'll want to use the nth-child() selector: $('#tableData tr td:nth-child(2)')

2. The "12" cell is selected when "2" is up because :contains() essentially matches strings. Since "2" is technically inside of "12", you'll need to do a different comparison. Something like this might work:

    $('#tableData tr td:nth-child(2)').filter( function(){ if( $(this).html() == ui.value ) $(this).addClass('highlight'); });