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

【问题标题】：Search specific column of table for highlight table data搜索表格的特定列以突出显示表格数据
【发布时间】：2012-02-22 07:58:26
【问题描述】：

有表格可以根据参数搜索和突出显示

当用户滑动滑块时，滑块值会发生变化，并根据值突出显示 TD。

因此，根据列，它应该突出显示。目前我已经添加类到 td （如 col-1，col-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");
            }
        });

【问题讨论】：

只是想知道您的句子“但是可以在不添加类的情况下做到这一点。”。添加/删除类有问题吗？其他选项是使用 .css，但我认为添加和删除类是一个很好的解决方案。
根据列向所有 TD 添加类，我认为会减慢脚本渲染速度。 [index] 是选项。

标签： javascript jquery html jquery-ui

【解决方案1】：

1) 我想在适当的 TD 中添加一个类是获得你想要的东西的好方法。

2) 我认为没有 CSS 选择器检查内容是否相等，但您可以使用过滤器：

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

【讨论】：

【解决方案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");
    }

});

【讨论】：

【解决方案3】：

要选择表中的列，您需要使用 nth-child() 选择器： $('#tableData tr td:nth-child(2)')
当“2”上升时选择“12”单元格，因为:contains() 基本上匹配字符串。由于“2”在技术上位于“12”之内，因此您需要进行不同的比较。这样的事情可能会奏效：
```
$('#tableData tr td:nth-child(2)').filter( function(){
    if( $(this).html() == ui.value )
        $(this).addClass('highlight');
});
```

【讨论】：