表 - 使用jQuery的Live Search搜索

我一直在爲我的數據表上的Live Search開發解決方案。表 - 使用jQuery的Live Search搜索

當我搜索Jim它按預期工作:-)

然而，當我搜索Carey，沒有結果出現。爲什麼是這樣？ :-(

$("#search").on("keyup", function() { 
 
    var value = $(this).val(); 
 

 
    $("table tr").each(function(index) { 
 
     if (index !== 0) { 
 

 
      $row = $(this); 
 

 
      var id = $row.find("td:first").text(); 
 

 
      if (id.indexOf(value) !== 0) { 
 
       $row.hide(); 
 
      } 
 
      else { 
 
       $row.show(); 
 
      } 
 
     } 
 
    }); 
 
});

table, tr, td, th{ 
 
    border: 1px solid blue; 
 
    padding: 2px; 
 
} 
 

 
table th{ 
 
    background-color: #999999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr> 
 
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr> 
 
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr> 
 
</table> 
 
<br /> 
 
<input type="text" id="search" placeholder=" live search"></input>

因爲下面一行的

來源

2016-08-30 michaelmcgurk

有一個插件來做到這一點，它也處理分頁和排序也：HTTPS： //datatables.net/，但要回答你的問題，你只是比較第一個td：'$ row.find（「td：first」）。text（）' – Pete

@Pete非常感謝。我正在研究這個插件。如何解決我當前的代碼來搜索其他TD？ :) – michaelmcgurk

我會這樣做：http://jsfiddle.net/L1d7naem/14/ – Pete

你想要的行爲，可以在每個循環以下更正實現（也注意到在條件< 0 ...）：

var id = $.map($row.find('td'), function(element) { 
    return $(element).text() 
}).join(' '); 

if (id.indexOf(value) < 0) { 
    $row.hide(); 
} else { 
    $row.show(); 
}

來源

2016-08-30 10:12:15

我會看看現在 - 非常感謝:) – michaelmcgurk

你有一個JSFiddle？你能解釋一下這個應該去的地方嗎？ – michaelmcgurk

當然：http://jsfiddle.net/d04yfx8d/。我附加了tds的所有字符串值並在其上應用過濾器。 –

它：

var id = $row.find("td:first").text();

您是在表的第一列工作僅「Carey」位於表

的第二列與所有的TD元素

$("#search").on("keyup", function() { 
var value = $(this).val(); 

$("table td").each(function() { 
    if(value.match($(this).text)) { 
     console.log($(this).text()); 
    } 

    else { 
     $("table").hide(); 
    } 
}); 
});

嘗試匹配：

來源

2016-08-30 10:03:42

Aaah。我如何解決查詢所有3列？ – michaelmcgurk

試試這個。

來源

2016-08-30 10:07:58

我試過了，但這是我得到的阿布舍克：http://jsfiddle.net/L1d7naem/11/ – michaelmcgurk

 $("#search").on("keyup", function() { 
    var value = $(this).val(); 

    $("table tr").each(function(index) { 
     if (index !== 0) { 

      $row = $(this); 

      var id = $.map($row.find('td'), function(element) { 
    return $(element).text() 
}).join(' '); 





      if (id.indexOf(value) <0) { 
       $row.hide(); 
      } 
      else { 
       $row.show(); 
      } 
     } 
    }); 
});

http://jsfiddle.net/Lyxex4tp/

來源

2016-08-30 10:10:28

它幾乎完美：-D你能解釋爲什麼當我輸入'19'時什麼都沒有出現？我期待這兩行仍然顯示。幫幫我？ :) – michaelmcgurk

因爲下面的代碼不考慮第三個td進入搜索，這就是爲什麼在鍵入19沒有任何反應 –

http://jsfiddle.net/Lbod9uj1/ –

試試這個。您必須遍歷所有列，並且一旦找到任何匹配項，只需使用each()函數中的return false;即可退出循環。另外，如果未找到字符串，則indexOf返回-1。

$("#search").on("keyup", function() { 
 
    var value = $(this).val(); 
 

 
    $("table tr").each(function(index) { 
 
     if (index !== 0) { 
 

 
      $row = $(this); 
 

 
      $row.find("td").each(function(){ 
 
       var id = $(this).text(); 
 
       if (id.indexOf(value) < 0) { 
 
       $row.hide(); 
 
       } 
 
       else { 
 
       $row.show(); 
 
       return false; 
 
       } 
 
      }); 
 
     } 
 
    }); 
 
});

table, tr, td, th{ 
 
    border: 1px solid blue; 
 
    padding: 2px; 
 
} 
 

 
table th{ 
 
    background-color: #999999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
<tr><th>Forename</th><th>Surname</th><th>Extension</th></tr> 
 
<tr><td>Jim</td><td>Carey</td><td>1945</td></tr> 
 
<tr><td>Michael</td><td>Johnson</td><td>1946</td></tr> 
 
</table> 
 
<br /> 
 
<input type="text" id="search" placeholder=" live search"></input>

來源

2016-08-30 10:16:40

希望這個作品，

$("#search").on("keyup", function() { 
var value = $(this).val(); 

$("table tr").each(function(index) { 
    if (index !== 0) { 
     var id = $(this).children().text() 
     if (id.indexOf(value) < 0) { 
      $(this).hide(); 
     }else { 
      $(this).show(); 
     } 
    } 
}); 
});

這裏是工作提琴https://jsfiddle.net/44Lux7ze/

來源

2016-08-30 10:27:02

表 - 使用jQuery的Live Search搜索

回答

相關問題