2012-02-22 84 views
0

有表來搜索和高亮按照參數搜索特定的列

當用戶滑動滑塊值的變化和作爲每值它突出TD。

  1. 因此,根據列應突出顯示。目前我已經添加了 類到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"); 
      } 
     }); 

enter image description here

+0

只是想知道你的句子「但是能這樣不添加類來完成。」添加/刪除類有問題嗎?其他選項將使用.css,但我認爲您添加和刪除類是一個很好的解決方案。 – Tx3 2012-02-22 08:02:14

+0

根據列向所有TD添加類,我認爲是減緩腳本渲染速度。 [索引]是選項。 – 2012-02-22 08:10:41

回答

3

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

});    
1
  1. 要選擇一個表中的列,你將要使用的第n個孩子()選擇: $('#tableData tr td:nth-child(2)')
  2. 的「12」單元時選擇「2」,因爲:contains()基本匹配字符串。由於「2」在技術上屬於「12」,因此您需要進行不同的比較。像這樣的東西可能會奏效:

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