Question

My earlier question was highlight column as per slider’s single value

Search specific column of table for highlight table data

Now I have slider with range like from 4-8 it should highlight. below is the code for same.

jQuery( "#svoltage-range" ).slider({
            orientation: "vertical",
            range:true,
            min: 2,
            max: 20,
            values: [ 2, 20 ],
            slide: function( event, ui ) {
                //jQuery( "#amount5" ).val( ui.value );
                jQuery( "#amount5" ).text( "" + ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                var columnCol = jQuery("#amount5").parent().prevAll().length;
                // jQuery('#tableData tr.data').hide();
                console.log("low value-->" + ui.values[ 0 ]);
                console.log("high value-->" + ui.values[ 1 ]);
                // remove Classes
                jQuery('#tableData tr.data').each(function() {
                    jQuery(this).find('td:eq('+columnCol+')').removeClass("jquery-colorBG-highLight");  // add
                });

                jQuery('#tableData tr').each(function() {
                    var highlightTD_1 = jQuery(this).find('td:eq('+columnCol+')').filter(function() {
                         return jQuery(this).text() >= ui.values[ 0 ];
                    });
                    highlightTD_1.addClass("jquery-colorBG-highLight");

                    var highlightTD_2 = jQuery(this).find('td:eq('+columnCol+')').filter(function() {
                         return jQuery(this).text() <= ui.values[ 1 ];
                    });
                    highlightTD_2.addClass("jquery-colorBG-highLight");                 
                    //highlightTD.parent().show();
                });



            }
        });

But there might be some Issue that it highlight all the fields. How to make highlight only TD which fall in range.

Live URL

Answer 1

Your code take all the tds which their values are bigger than the min value and all the tds which their values are smaller than the max value,this mean all the tds.

Change to this code:

            // remove Classes
            jQuery('#tableData tr.data').each(function() {
                jQuery(this).find('td:eq('+columnCol+')').removeClass("jquery-colorBG-highLight"); 
            });

            //add classes
            jQuery('#tableData tr').each(function() {
                var highlightTD_1 = jQuery(this).find('td:eq('+columnCol+')').filter(function() {
                     return jQuery(this).text() >= ui.values[ 0 ] && jQuery(this).text() <= ui.values[ 1 ];
                });
                highlightTD_1.addClass("jquery-colorBG-highLight");
            });