Sélecteur de ligne jquery table basé sur l'entrée utilisateur

Comment sélectionner les lignes en fonction de ce qui se trouve dans une zone de saisie? Voici ce que j'ai jusqu'à présent:Sélecteur de ligne jquery table basé sur l'entrée utilisateur

<html> 
<head> 
<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1"); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('#btnFilter').keyup(function() { 
     var myInput = $(this).val(); 
     $('tbody tr').hide(); 
     // I need to .show() all table rows that have a table cell with a value that begins with the input field. 
     $('tr').something goes here.show(); 
    }); 
}); 
</script> 
</head> 
<body> 
<form> 
    <input id="btnFilter" name="btnFilter"> 
</form> 
<table> 
    <thead> 
     <tr> 
      <th>Heading 1</th> 
      <th>Heading 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>A</td> 
      <td>X</td> 
     </tr> 
     <tr> 
      <td>ABC</td> 
      <td>D</td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html>

Source

2010-10-04 Phillip Senn

Pas une réponse directe, mais si vous cherchez un moyen de filtrer une table, jetez un oeil à http://www.datatables.net/. Il est dans jQuery, utilise directement la structure de votre tableau html et prend en charge la pagination, le filtrage, le tri et bien plus encore. C'est un super plugin. – lpfavreau

Si vous voulez une recherche, :contains() est probablement ce que vous êtes après, par exemple:

$('tr:contains("' + myInput + '")').show();

You can try it out here, ou une cellule commence avec seulement version:

$('td').filter(function() { 
    return $.text([this]).indexOf(myInput) == 0 
}).parent().show();

You can try that version here.

Source

2010-10-04 15:36:49

Zounds! Hey Nick! Vous êtes en W-S ?! Je suis à Hickory! Comment va la lune de miel? –

@cf_PhillipSenn - excellent :) essayer d'acheter une maison aussi bien cette semaine;) –

$(document).ready(function() { 
    $('#btnFilter').keyup(function() { 
     var myInput = $(this).val(); 
     $('tbody tr').hide().find('td:contains("'+myInput+'")').parents('tr:first').show() 
    }); 
});

Source

2010-10-04 15:44:53

Merci Praveen! –

Sélecteur de ligne jquery table basé sur l'entrée utilisateur

Répondre

Questions connexes