Définir la largeur de td en fonction du nombre de td en utilisant jquery

J'ai plusieurs pages Web avec différentes quantités de tables avec différentes quantités de colonnes.Définir la largeur de td en fonction du nombre de td en utilisant jquery

Je cherchais sur le net pour une jquery spinet qui obtient le nombre de colonnes de la table et en fonction du nombre de colonnes définira la largeur de chaque colonne.

Ex.

if (noOfTdOnTable == 2) { 
    tdWidth = "50%"; 
    } 
    if (noOfTdOnTable == 3) { 
     td1Width = "40%"; 
     td2Width = "40%"; 
     td3Width = "20%"; 
    } 
    if (noOfTdOnTable == 4) { 
     td1Width = "35%"; 
     td2Width = "25%"; 
     td3Width = "15%"; 
     td4Width = "15%"; 
    }

Mise à jour

En utilisant la seule réponse qu'on m'a donnée, j'ai ce au moment, mais ne fonctionne que quand il y a une table sur la page et je ne pouvais pas comprendre comment appliquer quand il y a deux colonnes.

 var num = $("table > td").length; 


    if (num % 4 == 0) { 
     $("table > td:eq(0)").css("width", "50%"); 
     $("table > td:eq(1)").css("width", "30%"); 
     $("table > td:eq(2)").css("width", "10%"); 
     $("table > td:eq(3)").css("width", "10%"); 
    } 
    if (num % 3 == 0) { 
     $("table > td:eq(0)").css("width", "50%"); 
     $("table > td:eq(1)").css("width", "40%"); 
     $("table > td:eq(2)").css("width", "10%"); 
    }

Voici un exemple du html, mais le code sera applicable à beaucoup de pages avec différents tableaux, mais non de toutes les tables auront soit 2,3 ou 4 colonnes.

<html>  
    <table> 
      <tr> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
      </tr> 
    </table> 

    <table> 
      <tr> 
       <td>text</td> 
       <td>text</td> 
      </tr> 
    </table> 

    <table> 
      <tr> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
       <td>text</td> 
      </tr> 
    </table> 
</html>

Source

2010-10-14 Amra

Question Dumb: Pourquoi ne pas vous définissez les largeurs de cellule de tableau directement dans votre code HTML ou CSS? – RoToRa

Pas si dump comme l'idée est d'appliquer le code à 100 des pages déjà créées avec beaucoup de tables et faire cela avec html ou css prendrait un certain temps. – Amra

Pour obtenir le nombre de colonnes:

var num = $("#table > tr > td").length;

Pour spécifier la largeur:

$("#table > tr > td").width(w + "px");

J'espère que c'est ce que vous recherchez

Edit:

Pour spécifier la largeur d'une colonne spécifique:

// si vous avez spécifié un identifiant à chaque td

$("#td1").width(td1Width+"px");

// si vous utilisez seulement des cours pour les identifier

$("td.td1", "#table1").width(td1Width+"px");

Je vous recommande également de regarder dans find() et end() pour sélectionner les colonnes d'une manière efficace. depuis qu'il a fait un $() appel est une opération plus coûteuse:

$("#table1").find("#td1").width(td1Width+"px").end().find("#td2")...

Edit 2

essayer cette place

$("table > tr > td:eq(0)").css("width", "50%");

ou mieux encore

$("table > tr > td").eq(0).css("width", "50%").end() 
        .eq(1).css(...etc;

"table" sera sélectionner tous les tableaux de la page; Utilisez id ou class pour identifier la table dont vous avez besoin.

Edit 3 (finale !!)

Ok, maintenant je peux voir tout le code que je peux donner une meilleure réponse.essayez ceci:

var num; 
var $tds; 
$("table").each(function(i, t) { 
    $tds = $("td", t); 
    num = $tds.length; 

    if (num % 4 == 0) { 
     $tds.eq(0).css("width", "50%").end() 
      .eq(1).css("width", "30%").end() 
      .eq(2).css("width", "10%").end() 
      .eq(3).css("width", "10%"); 
    } 
    if (num % 3 == 0) { 
     //etc 
    } 
});

J'espère que cela est une meilleure réponse :)

Source

2010-10-14 09:19:26 Mouhannad

il y aurait un problème s'il y a 'rowspan' – Reigel

@Mouhannad: Merci pour votre réponse. Pour définir la largeur du td, cela ne définirait-il pas la même largeur pour tous les tds? – Amra

Cela ne fonctionne pas pour moi car il obtient tous les tds sur la table et définir la même largeur pour tous les td. Mais merci quand même. – Amra

Définir la largeur de td en fonction du nombre de td en utilisant jquery

Répondre

Questions connexes