jQuery pour sélectionner la dernière cellule dans une colonne lors de l'utilisation rowspan

J'ai une table comme ceci:jQuery pour sélectionner la dernière cellule dans une colonne lors de l'utilisation rowspan

<table> 
    <tr><td>Not This</td><td rowspan="3">This</td></tr> 
    <tr><td>Not This</td></tr> 
    <tr><td>Not This</td></tr> 
    <tr><td>Not This</td><td>This</td></tr> 
</table>

Comment puis-je choisir seulement les plus à droite cellules (contenant « Ce ») dans chaque ligne afin que je puisse définir la couleur de la bordure?

J'ai essayé quelque chose comme:

table.find('tr > td:last-child').addClass('someclass');

Mais qui sélectionne les dernières cellules sur les 2e et 3e rangs, même si elles ne sont pas les plus à droite cellulaire.

Je n'utilise pas border-collapse sur ma table, et je préférerais l'éviter.

Source

2010-12-09 Code Commander

je devrais être plus clair. La solution: gt (0) fonctionne pour cette table d'exemple, mais je voudrais une solution plus générique puisque ma table peut avoir des largeurs de cellules variables. Je voudrais le plus à droite (comme rendu en html) des cellules. –

@Code Commander - Je crois que ma solution fonctionnera comme ça. – Ender

@Ender - va le mien :) –

Celui nécessaire un peu de ruse:

$(function() { 
    $('td:last-child[rowspan]').each(function() { 
     $(this).parent().nextAll().slice(0,$(this).attr('rowspan')-1).addClass('skip'); 
    }); 
    $('tr:not(.skip) > td:last-child').addClass('someclass'); 
    $('.skip').removeClass('skip'); 
});

Alors, vous commencez par la recherche d'une td qui est un dernier enfant et a un attribut rowspan. Vous itérez sur ceux-ci, en comptant les rangées après chacune et en ajoutant une classe à chacune de ces rangées pour les "sauter". Ensuite, vous ajoutez votre classe aux cellules last-child qui ne sont pas dans une ligne "skip", et finalement supprimez la classe skip.

Demo ici: http://jsfiddle.net/Ender/rzqEr/

Source

2010-12-09 20:52:40 Ender

Oui. Cela marche. :) Assez compliqué à regarder, mais c'est logique. Est-il plus rapide d'utiliser cette classe .skip au lieu de simplement créer une collection et d'utiliser quelque chose comme: $ ('tr') .non (ignoré) .children ('td: last-child'). AddClass ('someclass'); –

Je ne suis pas sûr que '.not()' fonctionne comme ça. Je pense que vous devez donner une chaîne de sélection. – Ender

Quelque chose comme ça semble fonctionner: http://jsfiddle.net/rzqEr/1/ Je ne sais pas si c'est mieux, mais cela empêche d'ajouter et de supprimer une classe temp. (Merci pour la solution, btw!) –

Vous pouvez aller avec quelque chose comme ça, peut-être une recherche coûteuse si vous avez plusieurs lignes si:

$('table tr').each(function(){ 

    if($('td',this).size() > 1){ 
    $(this).find('td:last-child').addClass('someclass'); 
    }; 

});

Here's a JSBin demo

Vous pouvez aussi le faire, en prenant de l'exemple de l'Spolto:

$('table tr').each(function(){ 

    $('td:gt(0)',this).addClass('someclass'); 

});

Another JSBin demo

Source

2010-12-09 20:45:23 jyoseph

Aucune de ces solutions ne fonctionne s'il y a plus d'une cellule dans une rangée qui se termine par une cellule sur une ligne. Ex 1: http://jsfiddle.net/Ender/hLUBg/ et Ex 2: http://jsfiddle.net/Ender/6x75q/ – Ender

L'exemple donné en html est ce à quoi la solution jQuery a été écrite. Rien d'autre que cela n'a été mentionné (par exemple le besoin d'une solution qui fonctionnerait pour n'importe quel nombre de cellules). – jyoseph

Pas pour insister sur le point, mais trouver une règle pour donner un exemple est de mettre le panier avant le cheval.Une partie de la bonne programmation consiste à trier les exigences (identifier la cellule la plus à droite) des incidents (dans cet exemple précis, il y avait quelques lignes avec seulement 1 cellule). Je m'excuse si cela se révèle médiocre ou trop critique, ce n'est pas censé être. – Ender

Vous devriez être en mesure de sauter la première <td> comme ceci:

$("table tr td:gt(0)").addClass('someclass');

Source

2010-12-09 20:48:31 cspolton

Cela ne fonctionnera que s'il n'y a qu'une seule cellule dans une rangée qui se termine par une cellule sur une ligne. – Ender

N'est-ce pas ce que la table OP est? – cspolton

Oui, c'est la table d'exemple, mais j'ai lu la requête comme "sélectionne les cellules les plus à droite" (indépendamment de la longueur de ligne). Je suppose que je peux me tromper, juste en couvrant mes bases :) – Ender

Cela devrait fonctionner:

$("TD ~ TD:last-child").addClass('someclass');

Réglage de la frontière sur la table elle-même serait probablement trop.

Source

2010-12-09 20:51:41

jQuery pour sélectionner la dernière cellule dans une colonne lors de l'utilisation rowspan

Répondre

Questions connexes