J'ai créé un tableau HTML et je souhaite intégrer un champ de recherche. Comment je fais ça? Pouvez-vous recommander un bon plugin jQuery ou mieux un tutoriel complet?Recherche HTML Table
2
A
Répondre
1
tables de recherche est simple:
$('#table1 tr td').each(function(){
if (this.innerHTML.indexOf(searchKeyword) > -1)
this.style.color = 'yellow' //found within this td so highlight it
});
3
Une approche rapide et sale, en utilisant jQuery:
$(document).ready(
function(){
$('#searchbox').keyup(
function(){
var searchText = $(this).val();
if (searchText.length > 0){
$('td:contains(' + searchText +')')
.css('background-color','#f00');
$('td:not(:contains('+searchText+'))')
.css('background-color','#fff');
}
});
});
avec ce qui suit (x) html:
<table>
<thead>
<tr>
<td colspan="2">
<label for="searchbox">Search:</label>
<input type="text" id="searchbox" />
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Something</td>
<td>More text</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>blah?</td>
</tr>
</tbody>
</table>
Sous la direction utiliser addClass()
/removeClass()
, à la place de la mise en css dans le jQuery lui-même:
$(document).ready(
function(){
$('#searchbox').keyup(
function(){
var searchText = $(this).val();
if (searchText.length > 0){
$('td:contains(' + searchText +')')
.addClass('searchResult');
$('td:not(:contains('+searchText+'))')
.removeClass('searchResult');
}
else if (searchText.length == 0) {
$('td.searchResult')
.removeClass('searchResult');
}
});
});
Pour se fanent les cellules de table qui ne contiennent pas le résultat de la recherche, vous pouvez utiliser les éléments suivants:
jQuery:
$(document).ready(
function(){
$('#searchbox').keyup(
function(){
var searchText = $(this).val();
if (searchText.length > 0) {
$('tbody td:contains('+searchText+')')
.addClass('searchResult');
$('.searchResult')
.not(':contains('+searchText+')')
.removeClass('searchResult');
$('tbody td')
.not(':contains('+searchText+')')
.addClass('faded');
$('.faded:contains('+searchText+')')
.removeClass('faded');
}
else if (searchText.length == 0) {
$('.searchResult').removeClass('searchResult');
$('.faded').removeClass('faded');
}
});
});
css:
td.faded {
opacity: 0.2;
}
1
Merci David Thomas
Bonne solution. Ce qui suit le rend parfait.
$(document).ready(
function(){
$('#searchbox').keyup(
function(){
var searchText = $(this).val();
if (searchText.length > 0) {
$('tbody td:contains('+searchText+')')
.addClass('searchResult');
$('.searchResult')
.not(':contains('+searchText+')')
.removeClass('searchResult');
$('tbody td')
.not(':contains('+searchText+')')
.addClass('faded');
$('.faded:contains('+searchText+')')
.removeClass('faded');
$('.faded').hide();
$('.searchResult').show();
}
else if (searchText.length == 0) {
$('.searchResult').removeClass('searchResult');
$('.faded').removeClass('faded');
$('td').show();
}
});
});
2
Il y a de grandes réponses. Mais this gars a fait ce que je voulais vraiment. il est différent des réponses slighly précédentes
HTML
<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>
<table id="my-table" border="1" style="border-collapse:collapse">
<thead>
<tr>
<th>Name</th>
<th>Sports</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sachin Tendulkar</td>
<td>Cricket</td>
<td>India</td>
</tr>
<tr>
<td>Tiger Woods</td>
<td>Golf</td>
<td>USA</td>
</tr>
<tr>
<td>Maria Sharapova</td>
<td>Tennis</td>
<td>Russia</td>
</tr>
</tbody>
</table>
Javascript (Jquery)
// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
$(document).ready(function(){
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function(){
// When value of the input is not blank
if($(this).val() != "")
{
// Show only matching TR, hide rest of them
$("#my-table tbody>tr").hide();
$("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
}
else
{
// When there is no input or clean again, show everything back
$("#my-table tbody>tr").show();
}
});
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
de démonstration en direct: http://blogs.digitss.com/demo/jquery-table-search.html
Questions connexes
- 1. Recherche en html Javascript
- 2. BeautifulSoup HTML Table parsing
- 3. HTML Table issue
- 4. Table HTML avec doctype
- 5. html table to powerpoint
- 6. Table Structure en Html
- 7. html table hauteur fixe?
- 8. Table HTML td signifiant
- 9. html: hover table column
- 10. Table html dynamique
- 11. résultats de recherche sans table
- 12. table de recherche dans c
- 13. Accordéon Recherche et HTML RadioButtons
- 14. Taille de table de recherche réduction
- 15. Recherche MySQL dans la base de données (recherche de table)
- 16. Ruby on Rails Générateur de table HTML
- 17. table HTML impression grande colonne
- 18. Bizarre IE (table HTML) probem
- 19. besoin des conseils HTML Table
- 20. Table HTML à exceler - PHP
- 21. Ruby Nokogiri Table HTML d'analyse
- 22. Comment centrer la table html?
- 23. html table au tableau ruby
- 24. Tri Table HTML générée dynamiquement
- 25. Taille de table dynamique html
- 26. Table HTML/CSS avec GRIDLINES
- 27. HTML, <table> fond
- 28. ASP.NET Obtenir la table html
- 29. Table XML/XSL vers HTML
- 30. HTML Table row edit/Delete
hey great..thnks .. comment puis-je afficher uniquement la recherche souhaitée au lieu de highlighti ça? – craig