jquery表搜索和行高亮

我遇到了一些麻煩。我有一個由PHP創建的表格，用於從Excel文件中提取數據。我想要做的是讓用戶能夠搜索某個值（也是用戶指定的）的某些列（用戶指定列），並且如果指定的值存在，則高亮顯示整行。jquery表搜索和行高亮

我一直在做功課，並沒有找到一個suiteable soulute。這裏是我的噩夢（相關代碼：

$(document).ready(function(){ 
    $("#search").click(function(){ 
     var searchText; 

     if(col == 0 || col == 1 || col ==3){ 
      searchText = $("#searchText").val() 
     } 
     else if(col == 6){ 
      searchText = $("#maxPets option:selected").text(); 
     } 
     else if(col == 7){ 
      searchText = $("#maxWeight option:selected").text(); 
     } 

     $("myTable tr td:nth-child(" + col +")").each(function() { 

      if ($(this).val.indexOf(searchText) !=-1) { 
       tr.addClass('result'); } 
      else { 
       tr.removeClass('result'); 
       } 

     }); 


    }); 
});

來源

2013-07-26 bigjfunk

其中是HTML。？ –

'col'變量來自哪裏？ – Schmalzy

http://bartaz.github.io/sandbox.js/jquery.highlight.html – DevlshOne

$(document).ready(function(){ 
    $("#search").click(function(){ 
     var searchText; 
     $("tr").removeClass("result"); 
     if (col == 0 || col == 1 || col == 3) { 
      searchText = $("#searchText").val(); 
     } 
     else if(col == 6){ 
      searchText = $("#maxPets option:selected").text(); 
     } 
     else if(col == 7){ 
      searchText = $("#maxWeight option:selected").text(); 
     } 
     $("#myTable tr").filter(function() { 
      return $("td:eq(" + col + ")", this).text() == searchText; 
     }).closest("tr").addClass("result"); 
    }); 
});

jsFiddle DEMO -- Updated for partial search

我還是不知道您取得col。我想下拉。

來源

2013-07-26 19:04:04 DevlshOne

是的，col變量來自下拉菜單。它是要搜索哪一列的索引。只有該列應該被搜索。這讓我瘋狂。 – bigjfunk

現在它僅限於搜索該列以查看'.text（）'是否匹配。 – DevlshOne

看起來好多了。我並不是真的與jQuery很多。它仍然沒有突出顯示該行。另外，它是否會搜索直接匹配或部分匹配？就像會突出顯示包含「Tanie Verde上的Aerie？」的行。非常感謝你的幫助。 – bigjfunk

變化：

 if ($(this).val.indexOf(searchText) !=-1) { 
      tr.addClass('result'); } 
     else { 
      tr.removeClass('result'); 
      }

到：

 if ($(this).text().indexOf(searchText) !=-1) { 
      $(this).closest("tr").addClass('result');  } 
     else { 
      $(this).closest("tr").removeClass('result'); 
     }

val是一個jQuery方法，它是一種功能，它不是一個字符串你可以搜索，而且這是你想要的東西的錯誤方法 - 表格字段的內容是用text() - val()讀取的，是用戶在放。

並沒有變量tr - 您想要添加/刪除元素的包含行的類。

這可以進一步簡化爲：

$(this).closest("tr").toggleClass("result", $(this).text().indexOf(searchText) !=-1);

來源

2013-07-26 19:01:56 Barmar

jquery表搜索和行高亮

回答

相關問題