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

Question

有根据参数搜索和突出显示的表

当用户滑动滑块值更改时，根据值突出显示TD。

1. 所以按照列应该突出显示。目前我已添加 class to td（如col-1，col-2 ..）但这可以不用 添加课程。

2. 当值为“2”时，“12”也会突出显示。可以做些什么     在这件事上？

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）我想在适当的TD上添加一个类是获得你想要的东西的好方法。

2）我认为没有CSS选择器检查内容相等性，但你可以使用过滤器：

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

Answer 2

如果是增加课程的一部分我会做的是：

而不是：

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

试试这个：

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

});              

Answer 3

1. 要选择表格中的列，您需要使用nth-child（）选择器： $('#tableData tr td:nth-child(2)')

2. 当“2”启动时选择“12”单元格，因为:contains()基本上匹配字符串。由于“2”在技术上位于“12”之内，因此您需要进行不同的比较。这样的事情可能有用：

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