JQuery: Si un en-tête de tableau <th> dispose d'une classe, d'ajouter une classe à la cellule de la table <td>

Disons que j'ai le code html suivant:

<table>
    <thead>
        <tr>
            <th class="alignRight">Header1</th>
            <th>Header2</th>
            <th class="alignLeft">Header3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row1</td> //Add class="alignRight"
            <td>Row1</td>
            <td>Row1</td> //Add class="alignLeft"
        </tr>
        <tr>
            <td>Row2</td> //Add class="alignRight"
            <td>Row2</td>
            <td>Row2</td> //Add class="alignLeft"
        </tr>
        <tr>
            <td>Row3</td> //Add class="alignRight"
            <td>Row3</td>
            <td>Row3</td> //Add class="alignLeft"
        </tr>
    </tbody>
</table>

Si un TR dans le THEAD contient la classe "alignRight" ou "alignLeft" je voudrais appliquer la même classe correspondant de la TD dans le TBODY.

J'utilise JQuery et ont essayé de la suite, mais aucun d'entre eux semblent fonctionner correctement:

$('tr').has('th.alignRight').addClass('th.alignRight');
$('tr').has('th.alignLeft').addClass('th.alignLeft');

$('thead.tr').has('th.alignRight').addClass('tbody.th.alignRight');
$('thead.tr').has('th.alignLeft').addClass('tbody.th.alignLeft');

if ($('thead.tr').has('th.alignRight')){
    $('tbody.tr').addClass('th.alignRight');
}

if ($('thead.tr').has('th.alignRight')){
    $('tbody.tr.td').addClass('alignRight');
}

Toutes les idées sur ce qui pourrait être mauvais?

Mise à JOUR:

Je voudrais ajouter que j'ai déjà parcourir le tableau à l'aide d'un .chacun() en boucle. J'ai seulement besoin d'ajouter la condition que, si la table d'en-tête a cette catégorie, ajouter la même classe de la cellule du tableau. L'ajout d'un supplément de l'itération au cours de l'itération actuelle semble que cela conduirait à des problèmes de performances. Est-ce vrai?

BOUCLE:

function(res) {
    var tbl_body = "";
    $.each(res, function () {
        var tbl_row = "";
        $.each(this, function (k, v) {

          //Irrelevant code

            tbl_row += "<td>" + v + "</td>";
        })
        tbl_body += "<tr>" + tbl_row + "</tr>";
    })
    $("#print").html(tbl_body);
    },
    //Other irrelevant code

Merci de poster votre boucle. Mais dans tous les cas, vous aurez à boucle sur votre tds.
Qu'est-ce que res ?
res = résultat. Il n'est pas utilisé dans ce cas.
Je ne comprends pas votre boucle, et donc comment le modifier pour mettre les classes. Viens de faire une autre boucle, plus tard, comme nous l'avons écrit : vous n'aurez pas de problèmes de performances, sauf si votre table a des milliers de lignes.

OriginalL'auteur Keven | 2013-11-13

6

Je pense que vous ne voyez pas comment sélecteurs jquery travail.
$('thead.tr') signifie : trouvez-moi tous les thead qui a le tr classe. Visiblement pas ce que vous voulez faire.

Voici un code qui devrait fonctionner :
```
$('tbody tr td').each(function(index){
    //index contains the current td index in the parent tr (1,2,3),(1,2,3)...
    //if the corresponding th has a class
    if($('thead tr th').eq(index).attr('class') != ''){
        //put this class on the current td
        $(this).addClass($('thead tr th').eq(index).attr('class'));
    }
});
```
De vérifier si la banque td a une classe n'est pas nécessaire, puisque addClass ne fait rien, si vous lui donnez un paramètre vide.

Voir ma mise à jour...
Postez votre boucle (voir mon commentaire)
Voir la boucle ci-dessus.
J'ai finalement finit par l'obtenir pour fonctionner avec votre code. Ainsi, vous obtenez le vérifier. Arun la réponse aurait probablement obtenu le vérifier, mais il utilise :nth-child qui a des problèmes avec IE8.
Comme je l'ai dit, ce n'est pas une grosse affaire pour analyser deux fois tif vous n'avez pas un très grand tableau. Et vous pouvez réduire ce code à une seule ligne.

OriginalL'auteur OlivierH
5

Essayer
```
$('table thead th[class]').each(function () {
    $('table tbody td:nth-child(' + ($(this).index() + 1) + ')').addClass(this.className)
})
```
Démo: Violon

Elle fonctionne. Pourquoi le downvote?
ne sais pas les gars.... folle journée je pense
semble être un de ces jours, +1
J'ai déjà un .chaque fonction qui parcourt les lignes de la table. J'ai besoin d'une fonction qui vérifie juste la table actuelle de la tête de classe, et si elle le fait, ajoutez cette classe à la cellule du tableau. Est de nidification .chacune des fonctions() un problème?
Voir ma mise à jour...

OriginalL'auteur Arun P Johny

Votre code ne fait pas ce que vous pensez que cela fonctionne:

//find all tr's that have a th with class `alignRight` and add class `th.alignRight` to them
$('tr').has('th.alignRight').addClass('th.alignRight');
//find all tr's that have a th with class `alignLeft` and add class `th.alignLeft` to them
$('tr').has('th.alignLeft').addClass('th.alignLeft');

etc, etc.

Votre code ne rien avec le <td>'s

Ce pourrait être fait:

var thead = $('thead');
var tbody = $('tbody');

var rightIndex = $('th.alignRight', thead).index();
var leftIndex = $('th.alignLeft', thead).index();

$('tr', tbody).each(function(){
   $('td', this).eq(rightIndex).addClass('alignRight');
   $('td', this).eq(leftIndex).addClass('alignLeft');
});

J'ai ajouté une mise à jour. Veuillez voir ci-dessus.

OriginalL'auteur Neal

0

Aucun de vos addClass chaînes sont valides. Whan ajout d'une classe que vous ne fournissez le nom de la classe.... pas de dot en elle
```
/* would add class to the TR*/
$('tr').has('th.alignLeft').addClass('alignLeft');
```
Maintenant ajouter à la TD pouvez simplement utiliser le sélecteur de
```
$('tr th.alignLeft td').addClass('alignLeft');
```
OriginalL'auteur charlietfl

Voici une solution: (fiddle ici)

var headrow = $('thead tr').children();
$('tbody tr').each(function(){
  var row = $(this).children();
  for(var i=0; i<headrow.length; ++i){
      if($(headrow[i]).hasClass("alignRight")){
          $(row[i]).addClass("alignRight");
      }
      if($(headrow[i]).hasClass("alignLeft")){
          $(row[i]).addClass("alignLeft");
      }
  }
});

OriginalL'auteur Miquel Las Heras

Vous devez vous connecter pour publier un commentaire.