Highligh數據範圍欄

Question

我前面的問題是亮點列按滑塊的單值

Search specific column of table for highlight table data

現在我有滑蓋系列，如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。

Live URL

Answer 1

你的代碼，把所有的td S的它們的值比最小值和所有的td S的它們的值比最高值更大，這意味着所有的td秒。

更改此代碼：

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