jQuery comment sélectionner tous les éléments tr d'une ligne et jusqu'à un arrêt

Une situation un peu étrange. J'écris un script greasemonkey sur un HTML hérité où tout est mis dans une table. Je veux sélectionner tous les éléments TR de celui que je clic et les 3-4-5-6 lignes suivantes à la ligne suivante qui contient une TD.class_namejQuery comment sélectionner tous les éléments tr d'une ligne et jusqu'à un arrêt

table 
    ... 
    tr -> td.class_name 
    tr 
    tr 
    tr 
    tr -> td.class_name 
    ... 
/table

Ainsi, dans l'exemple ci-dessus que je veux sélectionnez les lignes 2,3,4 (et cachez-les, ce qui est la partie triviale). Le défi est que je ne sais pas combien de lignes il y a, et cette table pourrait être très longue.

Comment pourrais-je le faire de manière élégante dans jQuery?

Source

2009-09-25 Jesper Rønn-Jensen

Do vous avez un exemple de la table en HTML? –

J'espère que vous comprenez l'exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<script type="text/javascript"> 
$(function(){ 

    var fnc = function(){ 
     $(this).nextAll().each(function() { 
      if (($(this)[0]) && ($(this)[0].tagName.toLowerCase()=="tr")) { 

       var td_lst = $(this).find('td[class="stop"]'); 
       if ($(td_lst).length!=0) 
        return false; 

       $(this).css("background-color","#00FF66"); 

      } else { 
       return false; 
      } 
    }); 
    } 

    $('table tr[class="xevent"]').bind("click", fnc); 

}); 
</script> 
<style> 
    .stop{ 
     background-color:#009999; 
    } 
</style> 
</head> 
<body> 
<table border="1"> 
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr class="xevent"><td>text a</td><td class="stop">text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
    <tr><td>text a</td><td>text b</td><td>text c</td></tr> 
</table> 
</body> 
</html>

Source

2009-09-25 19:14:07

Une chose que j'ai apprise est que .next() ne retourne pas les éléments TR cachés. Votre exemple fonctionne parce qu'il traverse .nextAll() –

Mon premier exemple utilisait .next() avec un "while (true)". Ca a marché mais je ne pensais pas performer. alors je passe à .nextAll() pour améliorer –

var in_selection = false; 
$('table#id tr').each(function() { 
    if ($('td.class_name', this)) { 
     if (in_selection) return false; 
     in_selection = true; 
    } 
    if (in_selection) { 
     $(this).addClass('selected'); 
    } 
    return true; 
}); 
not tested

Source

2009-09-25 18:28:16 Anatoliy

Essayez ceci ... Je ne sais pas si vous vouliez inclure la dernière ligne (le plus haut) avec le .class_name, donc je fait une démo du script sur this pastebin site et mis en évidence les lignes qu'il trouve. Vous pouvez supprimer les marques commentées lorsque vous souhaitez réellement supprimer les lignes.

Voici le code de base:

$(document).ready(function(){ 
$('.class_name').click(function(){ 
    var row = $(this)[0].rowIndex - 1; 
    $(this).addClass('removeme'); 
    for (j=0;j<row+1;j++){ 
    var el = $('table tr:eq('+(row-j)+')'); 
    if (el.hasClass('class_name')) { 
    // el.addClass('removeme'); // Remove comment marks if you want this row included 
    break; 
    } 
    el.addClass('removeme'); 
    } 
// $('.removeme').remove(); // Remove comment marks when you want to remove the rows 
}); 
});

Si vous ne voulez inclure le dernier (le plus haut) ramer avec la classe .class_name, puis juste Décommentez la el.addClass('removeme'); avant la break

Source

2009-09-27 10:30:11 Mottie

jQuery comment sélectionner tous les éléments tr d'une ligne et jusqu'à un arrêt

Répondre

Questions connexes