搜索高亮表格数据的特定列表 [英] Search specific column of table for highlight table data

问题描述

有一个表可以根据参数进行搜索和突出显示。

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

1. 因此，按照每列应突出显示。目前，我已经为td添加了
   类（如col-1，col-2 ..），但是这可以在没有
   添加类的情况下完成。




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





动态网址



  jQuery（＃slider-vertical） .slider（{//第一滑块电压
方向：垂直，
范围：min，
最小值：2，
最大值：16，
 step ：2，
 jQuery（＃tableData td.col-1 ）.removeClass（jquery-colorBG-highLight）; //添加
 var highlightTD = jQuery（'＃tableData tr td.col-1：contains（\''+ ui.value +'\' ）'）; 
 highlightTD.addClass（jquery-colorBG-highLight）; 
} 
}）; 
  





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

  var highlightTD = jQuery（'＃tableData tr td.col-1'）。filter（function（）{
 return $（this ）.text（）== ui.value; 
}）; 
  




There is table to search and highlight as per parameters

When user slide the slider value changes and as per value it highlight the TD.

1. So as per the column it should highlight. Currently I have added class to td (like col-1, col-2.. ) but can this be done without adding class.

2. When the value is "2" then "12" is also highlight. What can be done in this matter?

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

解决方案

1) I guess adding a class to the appropriate TD's is a pretty good way to get what you want.

2) I don't think there is a CSS selector checking for content equality, but you could use a filter:

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

这篇关于搜索高亮表格数据的特定列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！