在 jquery ui 中作为范围滑块的高数据

Highligh data as Range Slider in jquery ui

本文关键字：高数据数据 ui jquery 范围更新时间：2023-09-26

我之前的问题是根据滑块的单个值突出显示列

搜索表格的特定列以突出显示表格数据

现在我有滑块，范围从 4-8 应该突出显示。下面是相同的代码。

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

            }
        });

但是可能存在一些问题，它会突出显示所有字段。如何仅突出显示属于范围内的TD。

实时网址

您的代码采用其值大于最小值的所有td，以及其值小于最大值的所有td s，这意味着所有td s。

更改此代码：

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