在表的特定列中搜索突出顯示表數據

Question

有按參數搜索和突出顯示的表

當用戶滑動滑塊值時，其值會更改，並按值突出顯示TD。

1. 因此，根據該列應突出顯示。 目前，我已經向td添加了類（例如col-1，col-2 ..），但是可以在不添加類的情況下完成此操作。

2. 當值為“ 2”時，還將突出顯示“ 12”。 在這件事上可以做什么？

實時網址

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